/* ═══════════════════════════════════════════════════════════════════════════ ECS CAMPAIGN SIDEBAR Uses ONLY variables from theme.css ═══════════════════════════════════════════════════════════════════════════ */ /* ================================================================ SIDEBAR ================================================================ */ ._sidebar_kzgqx_19 { position: fixed; top: 0; left: 0; bottom: 0; width: var(--sidebar-width); height: 100vh; display: flex; flex-direction: column; background: var(--surface); border-right: 1px solid var(--line); box-shadow: var(--sh-md); z-index: var(--z-sidebar); overflow: hidden; transition: width var(--transition-slow), box-shadow var(--transition-fast), transform var(--transition-slow); } ._sidebar_kzgqx_19._collapsed_kzgqx_75 { width: var(--sidebar-collapsed); } ._sidebar_kzgqx_19._expanded_kzgqx_83 { width: var(--sidebar-width); } /* ================================================================ COMMON CENTER ELEMENTS ================================================================ */ ._logoMark_kzgqx_99, ._menuIcon_kzgqx_101, ._avatar_kzgqx_103, ._sidebarToggle_kzgqx_105, ._logoutIcon_kzgqx_107 { display: flex; align-items: center; justify-content: center; } /* ================================================================ LOGO ================================================================ */ ._logoSection_kzgqx_127 { width: 100%; height: 74px; /* min-height: 112px; */ display: flex; align-items: center; justify-content: center; padding: 6px; background: var(--surface); flex-shrink: 0; overflow: visible; } ._logoMark_kzgqx_99 { width: 80px; height: 57px; min-width: 108px; display: flex; align-items: center; justify-content: center; flex-shrink: 0; overflow: visible; } ._logoImage_kzgqx_195 { display: block; width: 70px; height: auto; max-width: 100%; max-height: 89px; object-fit: contain; object-position: center; margin: 0; } /* ================================================================ EXPANDED LOGO ================================================================ */ ._sidebar_kzgqx_19._expanded_kzgqx_83 ._logoSection_kzgqx_127 { height: 145px; min-height: 145px; display: flex; align-items: center; justify-content: center; padding: 8px; } ._sidebar_kzgqx_19._expanded_kzgqx_83 ._logoMark_kzgqx_99 { width: 180px; height: 135px; min-width: 180px; display: flex; align-items: center; justify-content: center; overflow: visible; } ._sidebar_kzgqx_19._expanded_kzgqx_83 ._logoImage_kzgqx_195 { width: 100px; height: auto; max-width: 100%; max-height: 100px; object-fit: contain; object-position: center; margin: 0; } /* ================================================================ MENU CONTAINER ================================================================ */ ._menuContainer_kzgqx_315 { width: 100%; flex: 1; min-height: 0; display: flex; flex-direction: column; gap: 6px; padding: 6px 10px 10px; overflow-x: hidden; overflow-y: auto; scrollbar-width: thin; scrollbar-color: var(--line-strong) transparent; } /* ================================================================ MENU SCROLLBAR ================================================================ */ ._menuContainer_kzgqx_315::-webkit-scrollbar { width: 4px; } ._menuContainer_kzgqx_315::-webkit-scrollbar-track { background: transparent; } ._menuContainer_kzgqx_315::-webkit-scrollbar-thumb { background: var(--line-strong); border-radius: var(--radius-full); } ._menuContainer_kzgqx_315::-webkit-scrollbar-thumb:hover { background: var(--border-medium); } /* ================================================================ MENU ITEM ================================================================ */ ._menuItem_kzgqx_409 { position: relative; width: 100%; min-height: 40px; display: flex; align-items: center; gap: 8px; padding: 6px 10px; border: 1px solid transparent; border-radius: var(--radius-md); background: var(--surface); color: var(--text-primary-dark); text-decoration: none; cursor: pointer; outline: none; transition: background var(--transition-fast), border-color var(--transition-fast), color var(--transition-fast), box-shadow var(--transition-fast), transform var(--transition-fast); } /* ================================================================ MENU HOVER ================================================================ */ ._menuItem_kzgqx_409:hover { background: color-mix(in srgb, var(--color-danger) 8%, var(--surface)); border-color: color-mix(in srgb, var(--color-danger) 25%, var(--line)); color: var(--color-danger); } ._menuItem_kzgqx_409:hover ._menuIcon_kzgqx_101, ._menuItem_kzgqx_409:hover ._menuLabel_kzgqx_505 { color: var(--color-danger); } /* ================================================================ MENU ICON ================================================================ */ ._menuIcon_kzgqx_101 { width: 20px; height: 20px; min-width: 20px; flex-shrink: 0; color: var(--text-primary-dark); transition: color var(--transition-fast); } ._menuIcon_kzgqx_101 svg { width: 18px; height: 18px; stroke-width: 1.8; } /* ================================================================ MENU LABEL ================================================================ */ ._menuLabel_kzgqx_505 { flex: 1; min-width: 0; color: inherit; font-size: var(--font-size-xs); font-weight: var(--font-weight-medium); line-height: 15px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; } /* ================================================================ ACTIVE MENU ================================================================ */ ._activeMenuItem_kzgqx_617 { background: color-mix(in srgb, var(--color-danger) 8%, var(--surface)); border-color: color-mix(in srgb, var(--color-danger) 35%, var(--line)); color: var(--color-danger); } ._activeMenuItem_kzgqx_617 ._menuIcon_kzgqx_101, ._activeMenuItem_kzgqx_617 ._menuLabel_kzgqx_505 { color: var(--color-danger); } ._activeMenuItem_kzgqx_617 ._menuLabel_kzgqx_505 { font-weight: var(--font-weight-semibold); } /* ═══════════════════════════════════════════════════════════════════ COLLAPSED MENU ═══════════════════════════════════════════════════════════════════ */ ._sidebar_kzgqx_19._collapsed_kzgqx_75 ._menuItem_kzgqx_409 { width: 70px; height: 58px; min-height: 58px; margin: 0 auto; padding: 4px 3px; flex-direction: column; align-items: center; justify-content: center; gap: 3px; border-color: var(--line); border-radius: var(--radius-lg); text-align: center; box-shadow: var(--shadow-sm), 0 5px 12px rgba(15, 23, 42, 0.03); } ._sidebar_kzgqx_19._collapsed_kzgqx_75 ._menuItem_kzgqx_409:hover { transform: translateY(-1px); border-color: color-mix(in srgb, var(--color-danger) 35%, var(--line)); box-shadow: 0 3px 8px color-mix(in srgb, var(--color-danger) 8%, transparent), var(--shadow-sm); } /* ================================================================ COLLAPSED ICON ================================================================ */ ._sidebar_kzgqx_19._collapsed_kzgqx_75 ._menuIcon_kzgqx_101 { width: 21px; height: 21px; min-width: 21px; flex: 0 0 21px; } ._sidebar_kzgqx_19._collapsed_kzgqx_75 ._menuIcon_kzgqx_101 svg { width: 18px; height: 18px; } /* ================================================================ COLLAPSED LABEL ================================================================ */ ._sidebar_kzgqx_19._collapsed_kzgqx_75 ._menuLabel_kzgqx_505 { width: 100%; flex: none; font-size: 9.5px; line-height: 12px; text-align: center; white-space: normal; overflow: visible; text-overflow: unset; } /* ================================================================ COLLAPSED ACTIVE ================================================================ */ ._sidebar_kzgqx_19._collapsed_kzgqx_75 ._activeMenuItem_kzgqx_617 { border-color: var(--color-danger); box-shadow: 0 3px 8px color-mix(in srgb, var(--color-danger) 8%, transparent); } /* ═══════════════════════════════════════════════════════════════════ SIDEBAR BOTTOM ═══════════════════════════════════════════════════════════════════ */ ._sidebarBottom_kzgqx_843 { width: 100%; flex-shrink: 0; padding: 7px 10px 8px; background: var(--surface); } /* ================================================================ DIVIDER ================================================================ */ ._bottomDivider_kzgqx_871 { width: 100%; height: 1px; margin-bottom: 8px; background: var(--line-strong); } /* ================================================================ PROFILE ROW ================================================================ */ ._profileRow_kzgqx_897 { width: 100%; display: flex; align-items: center; justify-content: space-between; gap: 6px; } /* ================================================================ PROFILE BUTTON ================================================================ */ ._profileButton_kzgqx_925 { flex: 1; min-width: 0; height: 42px; display: flex; align-items: center; gap: 8px; padding: 3px 5px; border: 1px solid transparent; border-radius: var(--radius-md); background: transparent; color: var(--text-primary-dark); font-family: inherit; cursor: pointer; text-align: left; overflow: hidden; appearance: none; transition: background var(--transition-fast), border-color var(--transition-fast); } ._profileButton_kzgqx_925:hover { background: color-mix(in srgb, var(--color-danger) 6%, var(--surface)); border-color: color-mix(in srgb, var(--color-danger) 20%, var(--line)); } /* ================================================================ AVATAR ================================================================ */ ._avatar_kzgqx_103 { width: 36px; height: 36px; min-width: 36px; flex: 0 0 36px; border-radius: var(--radius-full); background: var(--text-muted); color: var(--color-white); font-size: var(--font-size-xs); font-weight: var(--font-weight-bold); user-select: none; box-shadow: var(--shadow-sm); } ._avatar_kzgqx_103 svg { width: 19px; height: 19px; } /* ================================================================ PROFILE CONTENT ================================================================ */ ._profileContent_kzgqx_1081 { flex: 1; min-width: 0; display: flex; flex-direction: column; } ._profileName_kzgqx_1099 { color: var(--text-primary-dark); font-size: var(--font-size-xs); font-weight: var(--font-weight-semibold); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; } ._profileRole_kzgqx_1127 { margin-top: 1px; color: var(--text-muted); font-size: 10px; font-weight: var(--font-weight-medium); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; } /* ================================================================ SIDEBAR TOGGLE ================================================================ */ ._sidebarToggle_kzgqx_105 { width: 31px; height: 31px; min-width: 31px; flex: 0 0 31px; padding: 0; margin: 0; border: 1px solid var(--line); border-radius: var(--radius-md); background: var(--surface); color: var(--text-secondary); cursor: pointer; appearance: none; transition: background var(--transition-fast), border-color var(--transition-fast), color var(--transition-fast); } ._sidebarToggle_kzgqx_105 svg { width: 15px; height: 15px; stroke-width: 2; } ._sidebarToggle_kzgqx_105:hover { background: color-mix(in srgb, var(--color-danger) 8%, var(--surface)); border-color: color-mix(in srgb, var(--color-danger) 30%, var(--line)); color: var(--color-danger); } /* ================================================================ LOGOUT ================================================================ */ ._logoutButton_kzgqx_1263 { width: 100%; height: 32px; min-height: 32px; margin-top: 4px; padding: 4px 7px; display: flex; align-items: center; gap: 8px; border: 1px solid transparent; border-radius: var(--radius-md); background: transparent; color: var(--text-secondary); font-family: inherit; cursor: pointer; appearance: none; outline: none; transition: background var(--transition-fast), border-color var(--transition-fast), color var(--transition-fast); } ._logoutButton_kzgqx_1263:hover { background: color-mix(in srgb, var(--color-danger) 8%, var(--surface)); border-color: color-mix(in srgb, var(--color-danger) 25%, var(--line)); color: var(--color-danger); } ._logoutIcon_kzgqx_107 { width: 18px; height: 18px; min-width: 18px; flex-shrink: 0; } ._logoutIcon_kzgqx_107 svg { width: 15px; height: 15px; stroke-width: 2; } ._logoutLabel_kzgqx_1385 { flex: 1; color: inherit; font-size: var(--font-size-xs); font-weight: var(--font-weight-medium); text-align: left; white-space: nowrap; } /* ═══════════════════════════════════════════════════════════════════ COLLAPSED BOTTOM ═══════════════════════════════════════════════════════════════════ */ ._sidebar_kzgqx_19._collapsed_kzgqx_75 ._sidebarBottom_kzgqx_843 { padding: 6px 10px 7px; } ._sidebar_kzgqx_19._collapsed_kzgqx_75 ._bottomDivider_kzgqx_871 { width: 72px; margin-left: auto; margin-right: auto; margin-bottom: 7px; } ._sidebar_kzgqx_19._collapsed_kzgqx_75 ._profileRow_kzgqx_897 { justify-content: center; gap: 5px; } ._sidebar_kzgqx_19._collapsed_kzgqx_75 ._profileButton_kzgqx_925 { flex: 0 0 40px; width: 40px; min-width: 40px; height: 38px; min-height: 38px; padding: 2px; justify-content: center; } ._sidebar_kzgqx_19._collapsed_kzgqx_75 ._avatar_kzgqx_103 { width: 32px; height: 32px; min-width: 32px; flex: 0 0 32px; font-size: 10px; } ._sidebar_kzgqx_19._collapsed_kzgqx_75 ._sidebarToggle_kzgqx_105 { width: 29px; height: 29px; min-width: 29px; flex: 0 0 29px; } ._sidebar_kzgqx_19._collapsed_kzgqx_75 ._sidebarToggle_kzgqx_105 svg { width: 14px; height: 14px; } ._sidebar_kzgqx_19._collapsed_kzgqx_75 ._logoutButton_kzgqx_1263 { width: 32px; height: 29px; min-height: 29px; margin: 3px auto 0; padding: 0; justify-content: center; } ._sidebar_kzgqx_19._collapsed_kzgqx_75 ._logoutIcon_kzgqx_107 { width: 16px; height: 16px; min-width: 16px; } ._sidebar_kzgqx_19._collapsed_kzgqx_75 ._logoutIcon_kzgqx_107 svg { width: 14px; height: 14px; } /* ═══════════════════════════════════════════════════════════════════ MAIN CONTENT ═══════════════════════════════════════════════════════════════════ */ .admin-main { width: calc(100% - var(--current-sidebar-width, var(--sidebar-collapsed))); min-width: 0; min-height: 100vh; margin-left: var( --current-sidebar-width, var(--sidebar-collapsed) ) !important; box-sizing: border-box; background: var(--bg); transition: margin-left var(--transition-slow), width var(--transition-slow); } .admin-main > * { max-width: 100%; box-sizing: border-box; } /* ================================================================ OLD RESPONSIVE Desktop / tablet collapsed sizes preserved ================================================================ */ @media (max-width: 900px) { ._sidebar_kzgqx_19._collapsed_kzgqx_75 ._menuItem_kzgqx_409 { width: 68px; height: 56px; min-height: 56px; } ._sidebar_kzgqx_19._collapsed_kzgqx_75 ._menuIcon_kzgqx_101, ._sidebar_kzgqx_19._collapsed_kzgqx_75 ._menuIcon_kzgqx_101 svg { width: 17px; height: 17px; } ._sidebar_kzgqx_19._collapsed_kzgqx_75 ._menuLabel_kzgqx_505 { font-size: 9px; line-height: 11px; } } @media (max-width: 480px) { ._sidebar_kzgqx_19._collapsed_kzgqx_75 ._menuItem_kzgqx_409 { width: 66px; height: 54px; min-height: 54px; } ._sidebar_kzgqx_19._collapsed_kzgqx_75 ._menuIcon_kzgqx_101, ._sidebar_kzgqx_19._collapsed_kzgqx_75 ._menuIcon_kzgqx_101 svg { width: 16px; height: 16px; } ._sidebar_kzgqx_19._collapsed_kzgqx_75 ._menuLabel_kzgqx_505 { font-size: 8.5px; line-height: 10px; } } /* ═══════════════════════════════════════════════════════════════════ MOBILE HAMBURGER ═══════════════════════════════════════════════════════════════════ */ ._mobileMenuButton_kzgqx_1751 { display: none; } ._mobileOverlay_kzgqx_1759 { display: none; } ._mobileCloseButton_kzgqx_1767 { display: none; } /* ═══════════════════════════════════════════════════════════════════ MOBILE DRAWER ═══════════════════════════════════════════════════════════════════ */ @media (max-width: 768px) { /* ================================================================ HAMBURGER BUTTON ================================================================ */ ._mobileMenuButton_kzgqx_1751 { position: fixed; top: 12px; left: 12px; z-index: calc(var(--z-sidebar) + 20); width: 40px; height: 40px; display: flex; align-items: center; justify-content: center; padding: 0; border: 1px solid var(--line); border-radius: var(--radius-md); background: var(--surface); color: var(--text-primary-dark); box-shadow: var(--shadow-md); cursor: pointer; appearance: none; } ._mobileMenuButton_kzgqx_1751 svg { width: 21px; height: 21px; stroke-width: 2; } ._mobileMenuButton_kzgqx_1751:hover { color: var(--color-danger); border-color: color-mix(in srgb, var(--color-danger) 30%, var(--line)); background: color-mix(in srgb, var(--color-danger) 6%, var(--surface)); } /* ================================================================ OVERLAY ================================================================ */ ._mobileOverlay_kzgqx_1759 { position: fixed; inset: 0; z-index: calc(var(--z-sidebar) - 1); display: block; padding: 0; border: none; background: rgba(15, 23, 42, 0.42); cursor: pointer; appearance: none; } /* ================================================================ MOBILE SIDEBAR ================================================================ */ ._sidebar_kzgqx_19._mobileSidebar_kzgqx_1943 { width: 235px !important; height: 100vh; height: 100dvh; transform: translateX(-100%); visibility: hidden; pointer-events: none; box-shadow: var(--shadow-xl); transition: transform var(--transition-slow), visibility var(--transition-slow); } ._sidebar_kzgqx_19._mobileSidebar_kzgqx_1943._mobileOpen_kzgqx_1981 { width: 235px !important; transform: translateX(0); visibility: visible; pointer-events: auto; } /* ================================================================ MOBILE LOGO ================================================================ */ ._sidebar_kzgqx_19._mobileSidebar_kzgqx_1943 ._logoSection_kzgqx_127 { position: relative; width: 100%; height: 115px; min-height: 115px; display: flex; align-items: center; justify-content: center; padding: 8px 45px 8px 12px; overflow: visible; } ._sidebar_kzgqx_19._mobileSidebar_kzgqx_1943 ._logoMark_kzgqx_99 { width: 120px; height: 105px; min-width: 120px; display: flex; align-items: center; justify-content: center; overflow: visible; } ._sidebar_kzgqx_19._mobileSidebar_kzgqx_1943 ._logoImage_kzgqx_195 { width: 95px; height: auto; max-width: 95px; max-height: 100px; object-fit: contain; object-position: center; margin: 0; } /* ================================================================ CLOSE BUTTON ================================================================ */ ._mobileCloseButton_kzgqx_1767 { position: absolute; top: 12px; right: 12px; z-index: 5; width: 30px; height: 30px; display: flex; align-items: center; justify-content: center; padding: 0; border: 1px solid var(--line); border-radius: var(--radius-md); background: var(--surface); color: var(--text-secondary); cursor: pointer; appearance: none; transition: color var(--transition-fast), border-color var(--transition-fast), background var(--transition-fast); } ._mobileCloseButton_kzgqx_1767 svg { width: 17px; height: 17px; } ._mobileCloseButton_kzgqx_1767:hover { color: var(--color-danger); border-color: var(--color-danger); background: color-mix(in srgb, var(--color-danger) 6%, var(--surface)); } /* ================================================================ MOBILE MENU CONTAINER ================================================================ */ ._sidebar_kzgqx_19._mobileSidebar_kzgqx_1943 ._menuContainer_kzgqx_315 { width: 100%; flex: 1; gap: 6px; padding: 8px 12px 12px; overflow-x: hidden; overflow-y: auto; } /* ================================================================ MOBILE MENU ITEM ================================================================ */ ._sidebar_kzgqx_19._mobileSidebar_kzgqx_1943 ._menuItem_kzgqx_409 { width: 100%; height: auto; min-height: 44px; margin: 0; padding: 8px 10px; display: flex; flex-direction: row; align-items: center; justify-content: flex-start; gap: 10px; border: 1px solid transparent; border-radius: var(--radius-md); background: var(--surface); text-align: left; box-shadow: none; transform: none; } ._sidebar_kzgqx_19._mobileSidebar_kzgqx_1943 ._menuItem_kzgqx_409:hover { transform: none; } /* ================================================================ MOBILE MENU ICON ================================================================ */ ._sidebar_kzgqx_19._mobileSidebar_kzgqx_1943 ._menuIcon_kzgqx_101 { width: 21px; height: 21px; min-width: 21px; flex: 0 0 21px; } ._sidebar_kzgqx_19._mobileSidebar_kzgqx_1943 ._menuIcon_kzgqx_101 svg { width: 19px; height: 19px; stroke-width: 1.8; } /* ================================================================ MOBILE MENU LABEL ================================================================ */ ._sidebar_kzgqx_19._mobileSidebar_kzgqx_1943 ._menuLabel_kzgqx_505 { width: auto; flex: 1; min-width: 0; font-size: var(--font-size-sm); font-weight: var(--font-weight-medium); line-height: 18px; text-align: left; white-space: normal; overflow: visible; text-overflow: unset; } /* ================================================================ MOBILE ACTIVE ================================================================ */ ._sidebar_kzgqx_19._mobileSidebar_kzgqx_1943 ._activeMenuItem_kzgqx_617 { background: color-mix(in srgb, var(--color-danger) 8%, var(--surface)); border-color: var(--color-danger); color: var(--color-danger); box-shadow: none; } ._sidebar_kzgqx_19._mobileSidebar_kzgqx_1943 ._activeMenuItem_kzgqx_617 ._menuIcon_kzgqx_101, ._sidebar_kzgqx_19._mobileSidebar_kzgqx_1943 ._activeMenuItem_kzgqx_617 ._menuLabel_kzgqx_505 { color: var(--color-danger); } /* ================================================================ MOBILE BOTTOM ================================================================ */ ._sidebar_kzgqx_19._mobileSidebar_kzgqx_1943 ._sidebarBottom_kzgqx_843 { width: 100%; padding: 8px 12px 10px; } ._sidebar_kzgqx_19._mobileSidebar_kzgqx_1943 ._bottomDivider_kzgqx_871 { width: 100%; margin-left: 0; margin-right: 0; margin-bottom: 8px; } ._sidebar_kzgqx_19._mobileSidebar_kzgqx_1943 ._profileRow_kzgqx_897 { width: 100%; justify-content: flex-start; gap: 6px; } ._sidebar_kzgqx_19._mobileSidebar_kzgqx_1943 ._profileButton_kzgqx_925 { width: 100%; min-width: 0; height: 42px; min-height: 42px; flex: 1; padding: 3px 5px; justify-content: flex-start; } ._sidebar_kzgqx_19._mobileSidebar_kzgqx_1943 ._avatar_kzgqx_103 { width: 34px; height: 34px; min-width: 34px; flex: 0 0 34px; font-size: 10px; } ._sidebar_kzgqx_19._mobileSidebar_kzgqx_1943 ._logoutButton_kzgqx_1263 { width: 100%; height: 34px; min-height: 34px; margin-top: 4px; padding: 5px 7px; justify-content: flex-start; } ._sidebar_kzgqx_19._mobileSidebar_kzgqx_1943 ._logoutIcon_kzgqx_107 { width: 18px; height: 18px; min-width: 18px; } ._sidebar_kzgqx_19._mobileSidebar_kzgqx_1943 ._logoutIcon_kzgqx_107 svg { width: 15px; height: 15px; } /* ================================================================ MAIN CONTENT MOBILE ================================================================ */ .admin-main { width: 100% !important; max-width: 100% !important; margin-left: 0 !important; min-width: 0 !important; padding-top: 58px; overflow-x: hidden; } .admin-main > * { width: 100% !important; max-width: 100% !important; min-width: 0 !important; } } /* ================================================================ SMALL MOBILE ================================================================ */ @media (max-width: 480px) { ._mobileMenuButton_kzgqx_1751 { top: 10px; left: 10px; width: 38px; height: 38px; } ._mobileMenuButton_kzgqx_1751 svg { width: 20px; height: 20px; } ._sidebar_kzgqx_19._mobileSidebar_kzgqx_1943 { width: min(235px, 82vw) !important; } ._sidebar_kzgqx_19._mobileSidebar_kzgqx_1943._mobileOpen_kzgqx_1981 { width: min(235px, 82vw) !important; } } /* ================================================================ REDUCED MOTION ================================================================ */ @media (prefers-reduced-motion: reduce) { ._sidebar_kzgqx_19, ._menuItem_kzgqx_409, ._menuIcon_kzgqx_101, ._profileButton_kzgqx_925, ._sidebarToggle_kzgqx_105, ._logoutButton_kzgqx_1263, ._avatar_kzgqx_103, ._mobileMenuButton_kzgqx_1751, ._mobileCloseButton_kzgqx_1767 { transition: none; } } /* ═══════════════════════════════════════════════════════════════════ YUAA CAMPAIGNS - SUPER ADMIN SIDEBAR Same visual language as Admin Sidebar ═══════════════════════════════════════════════════════════════════ */ /* ================================================================ SIDEBAR ================================================================ */ ._sidebar_1o27r_19 { position: fixed; top: 0; left: 0; bottom: 0; width: var(--sidebar-width); height: 100vh; display: flex; flex-direction: column; background: var(--surface); border-right: 1px solid var(--line); box-shadow: var(--sh-md); z-index: var(--z-sidebar); overflow: hidden; transition: width var(--transition-slow), box-shadow var(--transition-fast), transform var(--transition-slow); } /* ================================================================ SIDEBAR STATES ================================================================ */ ._sidebar_1o27r_19._collapsed_1o27r_87 { width: var(--sidebar-collapsed); } ._sidebar_1o27r_19._expanded_1o27r_95 { width: var(--sidebar-width); } /* ================================================================ COMMON CENTER ELEMENTS ================================================================ */ ._logoMark_1o27r_111, ._menuIcon_1o27r_113, ._avatar_1o27r_115, ._sidebarToggle_1o27r_117, ._logoutIcon_1o27r_119 { display: flex; align-items: center; justify-content: center; } /* ================================================================ LOGO ================================================================ */ ._logoSection_1o27r_141 { width: 100%; height: 74px; /* min-height: 112px; */ display: flex; align-items: center; justify-content: center; padding: 6px; background: var(--surface); flex-shrink: 0; overflow: visible; } ._logoMark_1o27r_111 { width: 80px; height: 57px; min-width: 108px; display: flex; align-items: center; justify-content: center; flex-shrink: 0; overflow: visible; } ._logoImage_1o27r_213 { display: block; width: 70px; height: auto; max-width: 100%; max-height: 89px; object-fit: contain; object-position: center; margin: 0; } /* ================================================================ EXPANDED LOGO ================================================================ */ ._sidebar_1o27r_19._expanded_1o27r_95 ._logoSection_1o27r_141 { height: 145px; min-height: 145px; display: flex; align-items: center; justify-content: center; padding: 8px; } ._sidebar_1o27r_19._expanded_1o27r_95 ._logoMark_1o27r_111 { width: 180px; height: 135px; min-width: 180px; display: flex; align-items: center; justify-content: center; overflow: visible; } ._sidebar_1o27r_19._expanded_1o27r_95 ._logoImage_1o27r_213 { width: 100px; height: auto; max-width: 100%; max-height: 100px; object-fit: contain; object-position: center; margin: 0; } /* ================================================================ MENU CONTAINER ================================================================ */ ._menuContainer_1o27r_341 { width: 100%; flex: 1; min-height: 0; display: flex; flex-direction: column; gap: 6px; padding: 6px 10px 10px; overflow-x: hidden; overflow-y: auto; scrollbar-width: thin; scrollbar-color: var(--line-strong) transparent; } /* ================================================================ MENU SCROLLBAR ================================================================ */ ._menuContainer_1o27r_341::-webkit-scrollbar { width: 4px; } ._menuContainer_1o27r_341::-webkit-scrollbar-track { background: transparent; } ._menuContainer_1o27r_341::-webkit-scrollbar-thumb { background: var(--line-strong); border-radius: var(--radius-full); } ._menuContainer_1o27r_341::-webkit-scrollbar-thumb:hover { background: var(--border-medium); } /* ================================================================ MENU ITEM ================================================================ */ ._menuItem_1o27r_439 { position: relative; width: 100%; min-height: 40px; display: flex; align-items: center; gap: 8px; padding: 6px 10px; border: 1px solid transparent; border-radius: var(--radius-md); background: var(--surface); color: var(--text-primary-dark); text-decoration: none; cursor: pointer; outline: none; transition: background var(--transition-fast), border-color var(--transition-fast), color var(--transition-fast), box-shadow var(--transition-fast), transform var(--transition-fast); } /* ================================================================ MENU HOVER ================================================================ */ ._menuItem_1o27r_439:hover { background: color-mix(in srgb, var(--color-danger) 8%, var(--surface)); border-color: color-mix(in srgb, var(--color-danger) 25%, var(--line)); color: var(--color-danger); } ._menuItem_1o27r_439:hover ._menuIcon_1o27r_113, ._menuItem_1o27r_439:hover ._menuLabel_1o27r_539 { color: var(--color-danger); } /* ================================================================ MENU ICON ================================================================ */ ._menuIcon_1o27r_113 { width: 20px; height: 20px; min-width: 20px; flex-shrink: 0; color: var(--text-primary-dark); transition: color var(--transition-fast); } ._menuIcon_1o27r_113 svg { width: 18px; height: 18px; stroke-width: 1.8; } /* ================================================================ MENU LABEL ================================================================ */ ._menuLabel_1o27r_539 { flex: 1; min-width: 0; color: inherit; font-size: var(--font-size-xs); font-weight: var(--font-weight-medium); line-height: 15px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; } /* ================================================================ ACTIVE MENU ================================================================ */ ._activeMenuItem_1o27r_651 { background: color-mix(in srgb, var(--color-danger) 8%, var(--surface)); border-color: color-mix(in srgb, var(--color-danger) 35%, var(--line)); color: var(--color-danger); } ._activeMenuItem_1o27r_651 ._menuIcon_1o27r_113, ._activeMenuItem_1o27r_651 ._menuLabel_1o27r_539 { color: var(--color-danger); } ._activeMenuItem_1o27r_651 ._menuLabel_1o27r_539 { font-weight: var(--font-weight-semibold); } /* ═══════════════════════════════════════════════════════════════════ COLLAPSED MENU ═══════════════════════════════════════════════════════════════════ */ ._sidebar_1o27r_19._collapsed_1o27r_87 ._menuItem_1o27r_439 { width: 70px; height: 58px; min-height: 58px; margin: 0 auto; padding: 4px 3px; flex-direction: column; align-items: center; justify-content: center; gap: 3px; border-color: var(--line); border-radius: var(--radius-lg); text-align: center; box-shadow: var(--shadow-sm), 0 5px 12px rgba(15, 23, 42, 0.03); } ._sidebar_1o27r_19._collapsed_1o27r_87 ._menuItem_1o27r_439:hover { transform: translateY(-1px); border-color: color-mix(in srgb, var(--color-danger) 35%, var(--line)); box-shadow: 0 3px 8px color-mix(in srgb, var(--color-danger) 8%, transparent), var(--shadow-sm); } /* ================================================================ COLLAPSED ICON ================================================================ */ ._sidebar_1o27r_19._collapsed_1o27r_87 ._menuIcon_1o27r_113 { width: 21px; height: 21px; min-width: 21px; flex: 0 0 21px; } ._sidebar_1o27r_19._collapsed_1o27r_87 ._menuIcon_1o27r_113 svg { width: 18px; height: 18px; } /* ================================================================ COLLAPSED LABEL ================================================================ */ ._sidebar_1o27r_19._collapsed_1o27r_87 ._menuLabel_1o27r_539 { width: 100%; flex: none; font-size: 9.5px; line-height: 12px; text-align: center; white-space: normal; overflow: visible; text-overflow: unset; } /* ================================================================ COLLAPSED ACTIVE ================================================================ */ ._sidebar_1o27r_19._collapsed_1o27r_87 ._activeMenuItem_1o27r_651 { border-color: var(--color-danger); box-shadow: 0 3px 8px color-mix(in srgb, var(--color-danger) 8%, transparent); } /* ═══════════════════════════════════════════════════════════════════ SIDEBAR BOTTOM ═══════════════════════════════════════════════════════════════════ */ ._sidebarBottom_1o27r_877 { width: 100%; flex-shrink: 0; padding: 7px 10px 8px; background: var(--surface); } /* ================================================================ DIVIDER ================================================================ */ ._bottomDivider_1o27r_905 { width: 100%; height: 1px; margin-bottom: 8px; background: var(--line-strong); } /* ================================================================ PROFILE ROW ================================================================ */ ._profileRow_1o27r_933 { width: 100%; display: flex; align-items: center; justify-content: space-between; gap: 6px; } /* ================================================================ PROFILE BUTTON ================================================================ */ ._profileButton_1o27r_965 { flex: 1; min-width: 0; height: 42px; display: flex; align-items: center; gap: 8px; padding: 3px 5px; border: 1px solid transparent; border-radius: var(--radius-md); background: transparent; color: var(--text-primary-dark); font-family: inherit; cursor: pointer; text-align: left; overflow: hidden; appearance: none; transition: background var(--transition-fast), border-color var(--transition-fast); } ._profileButton_1o27r_965:hover { background: color-mix(in srgb, var(--color-danger) 6%, var(--surface)); border-color: color-mix(in srgb, var(--color-danger) 20%, var(--line)); } /* ================================================================ AVATAR ================================================================ */ ._avatar_1o27r_115 { width: 36px; height: 36px; min-width: 36px; flex: 0 0 36px; border-radius: var(--radius-full); background: var(--text-muted); color: var(--color-white); font-size: var(--font-size-xs); font-weight: var(--font-weight-bold); user-select: none; box-shadow: var(--shadow-sm); } ._avatar_1o27r_115 svg { width: 19px; height: 19px; } /* ================================================================ PROFILE CONTENT ================================================================ */ ._profileContent_1o27r_1125 { flex: 1; min-width: 0; display: flex; flex-direction: column; } ._profileName_1o27r_1145 { color: var(--text-primary-dark); font-size: var(--font-size-xs); font-weight: var(--font-weight-semibold); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; } ._profileRole_1o27r_1173 { margin-top: 1px; color: var(--text-muted); font-size: 10px; font-weight: var(--font-weight-medium); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; } /* ================================================================ SIDEBAR TOGGLE ================================================================ */ ._sidebarToggle_1o27r_117 { width: 31px; height: 31px; min-width: 31px; flex: 0 0 31px; padding: 0; margin: 0; border: 1px solid var(--line); border-radius: var(--radius-md); background: var(--surface); color: var(--text-secondary); cursor: pointer; appearance: none; transition: background var(--transition-fast), border-color var(--transition-fast), color var(--transition-fast); } ._sidebarToggle_1o27r_117 svg { width: 15px; height: 15px; stroke-width: 2; } ._sidebarToggle_1o27r_117:hover { background: color-mix(in srgb, var(--color-danger) 8%, var(--surface)); border-color: color-mix(in srgb, var(--color-danger) 30%, var(--line)); color: var(--color-danger); } /* ================================================================ LOGOUT ================================================================ */ ._logoutButton_1o27r_1311 { width: 100%; height: 32px; min-height: 32px; margin-top: 4px; padding: 4px 7px; display: flex; align-items: center; gap: 8px; border: 1px solid transparent; border-radius: var(--radius-md); background: transparent; color: var(--text-secondary); font-family: inherit; cursor: pointer; appearance: none; outline: none; transition: background var(--transition-fast), border-color var(--transition-fast), color var(--transition-fast); } ._logoutButton_1o27r_1311:hover { background: color-mix(in srgb, var(--color-danger) 8%, var(--surface)); border-color: color-mix(in srgb, var(--color-danger) 25%, var(--line)); color: var(--color-danger); } ._logoutIcon_1o27r_119 { width: 18px; height: 18px; min-width: 18px; flex-shrink: 0; } ._logoutIcon_1o27r_119 svg { width: 15px; height: 15px; stroke-width: 2; } ._logoutLabel_1o27r_1435 { flex: 1; color: inherit; font-size: var(--font-size-xs); font-weight: var(--font-weight-medium); text-align: left; white-space: nowrap; } /* ═══════════════════════════════════════════════════════════════════ COLLAPSED BOTTOM ═══════════════════════════════════════════════════════════════════ */ ._sidebar_1o27r_19._collapsed_1o27r_87 ._sidebarBottom_1o27r_877 { padding: 6px 10px 7px; } ._sidebar_1o27r_19._collapsed_1o27r_87 ._bottomDivider_1o27r_905 { width: 72px; margin-left: auto; margin-right: auto; margin-bottom: 7px; } ._sidebar_1o27r_19._collapsed_1o27r_87 ._profileRow_1o27r_933 { justify-content: center; gap: 5px; } ._sidebar_1o27r_19._collapsed_1o27r_87 ._profileButton_1o27r_965 { flex: 0 0 40px; width: 40px; min-width: 40px; height: 38px; min-height: 38px; padding: 2px; justify-content: center; } ._sidebar_1o27r_19._collapsed_1o27r_87 ._avatar_1o27r_115 { width: 32px; height: 32px; min-width: 32px; flex: 0 0 32px; font-size: 10px; } ._sidebar_1o27r_19._collapsed_1o27r_87 ._sidebarToggle_1o27r_117 { width: 29px; height: 29px; min-width: 29px; flex: 0 0 29px; } ._sidebar_1o27r_19._collapsed_1o27r_87 ._sidebarToggle_1o27r_117 svg { width: 14px; height: 14px; } ._sidebar_1o27r_19._collapsed_1o27r_87 ._logoutButton_1o27r_1311 { width: 32px; height: 29px; min-height: 29px; margin: 3px auto 0; padding: 0; justify-content: center; } ._sidebar_1o27r_19._collapsed_1o27r_87 ._logoutIcon_1o27r_119 { width: 16px; height: 16px; min-width: 16px; } ._sidebar_1o27r_19._collapsed_1o27r_87 ._logoutIcon_1o27r_119 svg { width: 14px; height: 14px; } /* ═══════════════════════════════════════════════════════════════════ SUPER ADMIN MAIN CONTENT ═══════════════════════════════════════════════════════════════════ */ ._main_1o27r_1645 { position: relative; width: calc( 100% - var(--current-superadmin-sidebar-width, var(--sidebar-collapsed)) ); max-width: calc( 100% - var(--current-superadmin-sidebar-width, var(--sidebar-collapsed)) ); min-width: 0; min-height: 100vh; margin-left: var( --current-superadmin-sidebar-width, var(--sidebar-collapsed) ); box-sizing: border-box; background: var(--bg); overflow-x: hidden; transition: margin-left var(--transition-slow), width var(--transition-slow), max-width var(--transition-slow); } ._main_1o27r_1645 > * { width: 100%; max-width: 100%; min-width: 0; box-sizing: border-box; } /* ═══════════════════════════════════════════════════════════════════ TABLET ═══════════════════════════════════════════════════════════════════ */ @media (max-width: 900px) { ._sidebar_1o27r_19._collapsed_1o27r_87 ._menuItem_1o27r_439 { width: 68px; height: 56px; min-height: 56px; } ._sidebar_1o27r_19._collapsed_1o27r_87 ._menuIcon_1o27r_113, ._sidebar_1o27r_19._collapsed_1o27r_87 ._menuIcon_1o27r_113 svg { width: 17px; height: 17px; } ._sidebar_1o27r_19._collapsed_1o27r_87 ._menuLabel_1o27r_539 { font-size: 9px; line-height: 11px; } } /* ═══════════════════════════════════════════════════════════════════ MOBILE DEFAULT ═══════════════════════════════════════════════════════════════════ */ ._mobileMenuButton_1o27r_1785 { display: none; } ._mobileOverlay_1o27r_1793 { display: none; } ._mobileCloseButton_1o27r_1801 { display: none; } /* ═══════════════════════════════════════════════════════════════════ MOBILE DRAWER ═══════════════════════════════════════════════════════════════════ */ @media (max-width: 768px) { /* ================================================================ HAMBURGER ================================================================ */ ._mobileMenuButton_1o27r_1785 { position: fixed; top: 12px; left: 12px; z-index: calc(var(--z-sidebar) + 20); width: 40px; height: 40px; display: flex; align-items: center; justify-content: center; padding: 0; border: 1px solid var(--line); border-radius: var(--radius-md); background: var(--surface); color: var(--text-primary-dark); box-shadow: var(--shadow-md); cursor: pointer; appearance: none; } ._mobileMenuButton_1o27r_1785 svg { width: 21px; height: 21px; stroke-width: 2; } ._mobileMenuButton_1o27r_1785:hover { color: var(--color-danger); border-color: color-mix(in srgb, var(--color-danger) 30%, var(--line)); background: color-mix(in srgb, var(--color-danger) 6%, var(--surface)); } /* ================================================================ OVERLAY ================================================================ */ ._mobileOverlay_1o27r_1793 { position: fixed; inset: 0; z-index: calc(var(--z-sidebar) - 1); display: block; padding: 0; border: none; background: rgba(15, 23, 42, 0.42); cursor: pointer; appearance: none; } /* ================================================================ MOBILE SIDEBAR ================================================================ */ ._sidebar_1o27r_19._mobileSidebar_1o27r_1979 { width: 235px !important; height: 100vh; height: 100dvh; transform: translateX(-100%); visibility: hidden; pointer-events: none; box-shadow: var(--shadow-xl); transition: transform var(--transition-slow), visibility var(--transition-slow); } ._sidebar_1o27r_19._mobileSidebar_1o27r_1979._mobileOpen_1o27r_2017 { width: 235px !important; transform: translateX(0); visibility: visible; pointer-events: auto; } /* ================================================================ MOBILE LOGO ================================================================ */ ._sidebar_1o27r_19._mobileSidebar_1o27r_1979 ._logoSection_1o27r_141 { position: relative; width: 100%; height: 115px; min-height: 115px; display: flex; align-items: center; justify-content: center; padding: 8px 45px 8px 12px; overflow: visible; } ._sidebar_1o27r_19._mobileSidebar_1o27r_1979 ._logoMark_1o27r_111 { width: 120px; height: 105px; min-width: 120px; display: flex; align-items: center; justify-content: center; overflow: visible; } ._sidebar_1o27r_19._mobileSidebar_1o27r_1979 ._logoImage_1o27r_213 { width: 95px; height: auto; max-width: 95px; max-height: 100px; object-fit: contain; object-position: center; margin: 0; } /* ================================================================ CLOSE BUTTON ================================================================ */ ._mobileCloseButton_1o27r_1801 { position: absolute; top: 12px; right: 12px; z-index: 5; width: 30px; height: 30px; display: flex; align-items: center; justify-content: center; padding: 0; border: 1px solid var(--line); border-radius: var(--radius-md); background: var(--surface); color: var(--text-secondary); cursor: pointer; appearance: none; transition: color var(--transition-fast), border-color var(--transition-fast), background var(--transition-fast); } ._mobileCloseButton_1o27r_1801 svg { width: 17px; height: 17px; } ._mobileCloseButton_1o27r_1801:hover { color: var(--color-danger); border-color: var(--color-danger); background: color-mix(in srgb, var(--color-danger) 6%, var(--surface)); } /* ================================================================ MOBILE MENU CONTAINER ================================================================ */ ._sidebar_1o27r_19._mobileSidebar_1o27r_1979 ._menuContainer_1o27r_341 { width: 100%; flex: 1; gap: 6px; padding: 8px 12px 12px; overflow-x: hidden; overflow-y: auto; } /* ================================================================ MOBILE MENU ITEM ================================================================ */ ._sidebar_1o27r_19._mobileSidebar_1o27r_1979 ._menuItem_1o27r_439 { width: 100%; height: auto; min-height: 44px; margin: 0; padding: 8px 10px; display: flex; flex-direction: row; align-items: center; justify-content: flex-start; gap: 10px; border: 1px solid transparent; border-radius: var(--radius-md); background: var(--surface); text-align: left; box-shadow: none; transform: none; } ._sidebar_1o27r_19._mobileSidebar_1o27r_1979 ._menuItem_1o27r_439:hover { transform: none; } /* ================================================================ MOBILE ICON ================================================================ */ ._sidebar_1o27r_19._mobileSidebar_1o27r_1979 ._menuIcon_1o27r_113 { width: 21px; height: 21px; min-width: 21px; flex: 0 0 21px; } ._sidebar_1o27r_19._mobileSidebar_1o27r_1979 ._menuIcon_1o27r_113 svg { width: 19px; height: 19px; stroke-width: 1.8; } /* ================================================================ MOBILE LABEL ================================================================ */ ._sidebar_1o27r_19._mobileSidebar_1o27r_1979 ._menuLabel_1o27r_539 { width: auto; flex: 1; min-width: 0; font-size: var(--font-size-sm); font-weight: var(--font-weight-medium); line-height: 18px; text-align: left; white-space: normal; overflow: visible; text-overflow: unset; } /* ================================================================ MOBILE ACTIVE ================================================================ */ ._sidebar_1o27r_19._mobileSidebar_1o27r_1979 ._activeMenuItem_1o27r_651 { background: color-mix(in srgb, var(--color-danger) 8%, var(--surface)); border-color: var(--color-danger); color: var(--color-danger); box-shadow: none; } ._sidebar_1o27r_19._mobileSidebar_1o27r_1979 ._activeMenuItem_1o27r_651 ._menuIcon_1o27r_113, ._sidebar_1o27r_19._mobileSidebar_1o27r_1979 ._activeMenuItem_1o27r_651 ._menuLabel_1o27r_539 { color: var(--color-danger); } /* ================================================================ MOBILE BOTTOM ================================================================ */ ._sidebar_1o27r_19._mobileSidebar_1o27r_1979 ._sidebarBottom_1o27r_877 { width: 100%; padding: 8px 12px 10px; } ._sidebar_1o27r_19._mobileSidebar_1o27r_1979 ._bottomDivider_1o27r_905 { width: 100%; margin-left: 0; margin-right: 0; margin-bottom: 8px; } ._sidebar_1o27r_19._mobileSidebar_1o27r_1979 ._profileRow_1o27r_933 { width: 100%; justify-content: flex-start; gap: 6px; } ._sidebar_1o27r_19._mobileSidebar_1o27r_1979 ._profileButton_1o27r_965 { width: 100%; min-width: 0; height: 42px; min-height: 42px; flex: 1; padding: 3px 5px; justify-content: flex-start; } ._sidebar_1o27r_19._mobileSidebar_1o27r_1979 ._avatar_1o27r_115 { width: 34px; height: 34px; min-width: 34px; flex: 0 0 34px; font-size: 10px; } ._sidebar_1o27r_19._mobileSidebar_1o27r_1979 ._logoutButton_1o27r_1311 { width: 100%; height: 34px; min-height: 34px; margin-top: 4px; padding: 5px 7px; justify-content: flex-start; } ._sidebar_1o27r_19._mobileSidebar_1o27r_1979 ._logoutIcon_1o27r_119 { width: 18px; height: 18px; min-width: 18px; } ._sidebar_1o27r_19._mobileSidebar_1o27r_1979 ._logoutIcon_1o27r_119 svg { width: 15px; height: 15px; } /* ================================================================ SUPER ADMIN MAIN - MOBILE ================================================================ */ ._main_1o27r_1645 { width: 100% !important; max-width: 100% !important; margin-left: 0 !important; min-width: 0 !important; padding-top: 58px; overflow-x: hidden; } ._main_1o27r_1645 > * { width: 100% !important; max-width: 100% !important; min-width: 0 !important; } } /* ═══════════════════════════════════════════════════════════════════ SMALL MOBILE ═══════════════════════════════════════════════════════════════════ */ @media (max-width: 480px) { ._mobileMenuButton_1o27r_1785 { top: 10px; left: 10px; width: 38px; height: 38px; } ._mobileMenuButton_1o27r_1785 svg { width: 20px; height: 20px; } ._sidebar_1o27r_19._mobileSidebar_1o27r_1979 { width: min(235px, 82vw) !important; } ._sidebar_1o27r_19._mobileSidebar_1o27r_1979._mobileOpen_1o27r_2017 { width: min(235px, 82vw) !important; } } /* ═══════════════════════════════════════════════════════════════════ REDUCED MOTION ═══════════════════════════════════════════════════════════════════ */ @media (prefers-reduced-motion: reduce) { ._sidebar_1o27r_19, ._menuItem_1o27r_439, ._menuIcon_1o27r_113, ._profileButton_1o27r_965, ._sidebarToggle_1o27r_117, ._logoutButton_1o27r_1311, ._avatar_1o27r_115, ._mobileMenuButton_1o27r_1785, ._mobileCloseButton_1o27r_1801 { transition: none; } } /* ========================================================= DASHBOARD ========================================================= */ ._dashboard_1pxgs_9 { width: 100%; min-width: 0; display: flex; flex-direction: column; /* gap: var(--space-4); */ padding-top: var(--space-4); padding-bottom: var(--space-4); box-sizing: border-box; background: var(--color-bg-light); color: var(--text-primary-dark); font-family: var(--font-family-base); font-size: var(--font-size-base); } /* ========================================================= HEADER ========================================================= */ ._header_1pxgs_59 { display: flex; justify-content: space-between; align-items: flex-start; gap: 16px; margin-bottom: 10px; } ._header_1pxgs_59 h1 { margin: 0 0 var(--space-1); color: var(--text-primary-dark); font-size: var(--font-size-2xl); font-weight: var(--font-weight-bold); line-height: 1.25; } ._header_1pxgs_59 h1 span { margin: 0; color: var(--text-secondary); font-size: var(--font-size-base); line-height: 1.5; } ._header_1pxgs_59 p { margin: 4px 0 0; color: #64728b; font-size: 10px; line-height: 1.4; } ._headerActions_1pxgs_119 { display: flex; align-items: center; gap: 10px; } /* ========================================================= MONTH SELECTOR ========================================================= */ ._monthSelector_1pxgs_139 { height: 32px; min-width: 155px; padding: 0 8px 0 10px; box-sizing: border-box; display: flex; align-items: center; gap: 6px; border: 1px solid #d9e3f4; border-radius: 7px; background: #ffffff; color: #17233f; transition: border-color 0.2s ease, box-shadow 0.2s ease; } ._monthSelector_1pxgs_139:hover { border-color: #b9c9e5; } ._monthSelector_1pxgs_139:focus-within { border-color: #3478f6; box-shadow: 0 0 0 2px rgba(52, 120, 246, 0.08); } ._monthSelector_1pxgs_139 > svg:first-child { width: 13px; height: 13px; flex-shrink: 0; color: #3478f6; } ._monthSelector_1pxgs_139 > svg:last-child { width: 13px; height: 13px; flex-shrink: 0; color: #718097; pointer-events: none; } ._monthSelect_1pxgs_139 { flex: 1; min-width: 0; height: 30px; border: none; outline: none; background: transparent; color: #17233f; font-family: inherit; font-size: 10px; font-weight: 500; cursor: pointer; appearance: none; } ._monthSelect_1pxgs_139 option { background: #ffffff; color: #17233f; } /* ========================================================= ERROR MESSAGE ========================================================= */ ._errorMessage_1pxgs_283 { min-height: 34px; width: 100%; box-sizing: border-box; display: flex; align-items: center; gap: 7px; margin: 4px 0 6px; padding: 7px 10px; border: 1px solid #ffd4d4; border-radius: 7px; background: #fff7f7; color: #c73b3b; font-size: 10px; } ._errorMessage_1pxgs_283 > svg { width: 13px; height: 13px; flex-shrink: 0; } ._errorMessage_1pxgs_283 span { flex: 1; min-width: 0; } ._errorMessage_1pxgs_283 button { height: 25px; padding: 0 9px; display: flex; align-items: center; gap: 5px; border: 1px solid #f0bcbc; border-radius: 5px; background: #ffffff; color: #c73b3b; font-family: inherit; font-size: 9px; font-weight: 600; cursor: pointer; } ._errorMessage_1pxgs_283 button:hover { background: #fff0f0; } ._errorMessage_1pxgs_283 button svg { width: 11px; height: 11px; } /* ========================================================= DASHBOARD PERIOD ========================================================= */ ._dashboardPeriod_1pxgs_415 { min-height: 18px; margin-bottom: 6px; display: flex; align-items: center; gap: 6px; color: #53627b; font-size: 10px; } ._dashboardPeriod_1pxgs_415 span { color: #53627b; } ._dashboardPeriod_1pxgs_415 strong { color: #162746; font-weight: 700; } ._dashboardPeriod_1pxgs_415 small { color: #738099; font-size: 9px; } ._refreshingIcon_1pxgs_467 { width: 11px; height: 11px; color: #3478f6; animation: _spin_1pxgs_1 1s linear infinite; } @keyframes _spin_1pxgs_1 { from { transform: rotate(0deg); } to { transform: rotate(360deg); } } /* ========================================================= LOADING ========================================================= */ ._loadingContainer_1pxgs_509 { min-height: 420px; display: flex; flex-direction: column; align-items: center; justify-content: center; color: #66748c; } ._loadingContainer_1pxgs_509 p { margin: 10px 0 0; font-size: 11px; } ._loadingIcon_1pxgs_541 { width: 25px; height: 25px; color: #3478f6; animation: _spin_1pxgs_1 1s linear infinite; } /* ========================================================= STAT CARDS ========================================================= */ ._statsGrid_1pxgs_563 { display: grid; grid-template-columns: repeat(4, 1fr); gap: 14px; margin-bottom: 18px; } ._statCard_1pxgs_577 { min-height: 80px; border-radius: 12px; padding: 14px 16px; display: flex; align-items: center; gap: 12px; box-sizing: border-box; border: 1px solid transparent; transition: transform 0.2s ease, box-shadow 0.2s ease; } ._statCard_1pxgs_577:hover { transform: translateY(-1px); box-shadow: 0 5px 16px rgba(30, 60, 100, 0.06); } ._statBlue_1pxgs_623 { background: linear-gradient(135deg, #f9fbff 0%, #f2f7ff 100%); border-color: #d9e6ff; } ._statOrange_1pxgs_635 { background: linear-gradient(135deg, #fffdf9 0%, #fff7ed 100%); border-color: #ffe4c4; } ._statIcon_1pxgs_647 { width: 42px; height: 42px; flex-shrink: 0; border-radius: 50%; display: flex; align-items: center; justify-content: center; font-size: 17px; } ._statIcon_1pxgs_647 svg { width: 18px; height: 18px; } ._iconBlue_1pxgs_687 { background: #e5efff; color: #3478f6; } ._iconOrange_1pxgs_697 { background: #fff0dc; color: #ff8b16; } ._statInfo_1pxgs_707 { min-width: 0; display: flex; flex-direction: column; } ._statInfo_1pxgs_707 > span { color: #3d4961; font-size: 10px; margin-bottom: 4px; } ._statInfo_1pxgs_707 > strong { color: #0b1b3a; font-size: 20px; line-height: 1; margin-bottom: 6px; font-weight: 700; } ._statInfo_1pxgs_707 small { min-height: 12px; color: #13a563; font-size: 9px; display: flex; align-items: center; gap: 2px; } ._statInfo_1pxgs_707 small svg { width: 11px; height: 11px; } ._statInfo_1pxgs_707 em { color: #7a8498; font-style: normal; margin-left: 2px; } /* ========================================================= COMMON CARDS ========================================================= */ ._card_1pxgs_801 { background: #ffffff; border: 1px solid #e4eaf3; border-radius: 12px; box-shadow: 0 3px 12px rgba(32, 65, 110, 0.035); overflow: hidden; } ._chartGrid_1pxgs_823 { display: grid; grid-template-columns: 1.65fr 1fr; gap: 14px; margin-bottom: 14px; } ._bottomGrid_1pxgs_837 { display: grid; grid-template-columns: 1.65fr 1fr; gap: 14px; } ._cardHeader_1pxgs_849 { min-height: 50px; padding: 12px 16px; display: flex; align-items: center; justify-content: space-between; box-sizing: border-box; } ._cardHeader_1pxgs_849 h3 { margin: 0; color: #101e3d; font-size: 12px; font-weight: 650; line-height: 1.3; } ._chartPeriod_1pxgs_893 { color: #162746; font-size: 10px; font-weight: 500; } /* ========================================================= LEGEND ========================================================= */ ._legend_1pxgs_913 { display: flex; gap: 16px; margin-top: 8px; } ._legend_1pxgs_913 span { display: flex; align-items: center; gap: 5px; color: #4d5870; font-size: 9px; } ._legend_1pxgs_913 i { width: 14px; height: 2px; display: block; border-radius: 3px; } ._smsLegend_1pxgs_961 { background: #3478f6; } ._whatsappLegend_1pxgs_969 { background: #ff9418; } /* ========================================================= DROPDOWN ========================================================= */ ._dropdownButton_1pxgs_985 { background: #ffffff; border: 1px solid #dce4ef; border-radius: 6px; padding: 6px 10px; display: flex; align-items: center; gap: 6px; color: #273550; font-size: 9px; cursor: pointer; } /* ========================================================= LINE CHART ========================================================= */ ._lineChart_1pxgs_1029 { display: flex; height: 200px; padding: 5px 16px 14px 10px; box-sizing: border-box; } ._yAxis_1pxgs_1049 { width: 30px; display: flex; flex-direction: column; justify-content: space-between; padding: 12px 0 18px; box-sizing: border-box; } ._yAxis_1pxgs_1049 span { color: #7b879b; font-size: 8px; line-height: 1; } ._chartArea_1pxgs_1085 { position: relative; flex: 1; height: 100%; min-width: 0; } ._gridLines_1pxgs_1105 { position: absolute; left: 0; right: 0; top: 10px; bottom: 25px; display: flex; flex-direction: column; justify-content: space-between; } ._gridLines_1pxgs_1105 span { width: 100%; border-top: 1px solid #edf1f7; } ._svgChart_1pxgs_1143 { position: absolute; top: 10px; left: 0; width: 100%; height: calc(100% - 35px); overflow: visible; } ._xAxis_1pxgs_1167 { position: absolute; bottom: 0; left: 0; right: 0; display: flex; justify-content: space-between; gap: 5px; } ._xAxis_1pxgs_1167 span { min-width: 0; max-width: 100px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; color: #7b879b; font-size: 8px; text-align: center; } /* ========================================================= EMPTY CHART ========================================================= */ ._emptyChart_1pxgs_1229 { height: 150px; display: flex; flex-direction: column; align-items: center; justify-content: center; color: #78869d; } ._emptyChart_1pxgs_1229 svg { width: 22px; height: 22px; margin-bottom: 7px; color: #8795aa; } ._emptyChart_1pxgs_1229 p { margin: 0; color: #66748c; font-size: 10px; } /* ========================================================= CHANNEL QUICK STATS ========================================================= */ ._channelQuickStats_1pxgs_1291 { display: grid; grid-template-columns: repeat(auto-fit, minmax(110px, 1fr)); gap: 8px; padding: 0 16px 14px; box-sizing: border-box; } ._channelQuickStat_1pxgs_1291 { min-width: 0; padding: 8px 9px; border: 1px solid #edf1f6; border-radius: 7px; background: #fafcff; } ._channelQuickStat_1pxgs_1291 > div { display: flex; align-items: center; gap: 5px; margin-bottom: 5px; } ._channelQuickStat_1pxgs_1291 > div svg { width: 12px; height: 12px; color: #3478f6; } ._channelQuickStat_1pxgs_1291 > div span { min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; color: #52617a; font-size: 8px; } ._channelQuickStat_1pxgs_1291 > strong { display: block; color: #152442; font-size: 13px; line-height: 1.1; margin-bottom: 3px; } ._channelQuickStat_1pxgs_1291 > small { color: #7b879b; font-size: 8px; } /* ========================================================= CHANNEL DISTRIBUTION ========================================================= */ ._channelContent_1pxgs_1425 { min-height: 175px; display: flex; align-items: center; justify-content: center; gap: 26px; padding: 5px 16px 12px; box-sizing: border-box; } ._donutWrapper_1pxgs_1453 { display: flex; align-items: center; justify-content: center; flex-shrink: 0; } ._donut_1pxgs_1453 { width: 130px; height: 130px; border-radius: 50%; position: relative; display: flex; align-items: center; justify-content: center; } ._donut_1pxgs_1453::after { content: ""; width: 88px; height: 88px; border-radius: 50%; background: #ffffff; position: absolute; } ._donutCenter_1pxgs_1521 { position: relative; z-index: 1; display: flex; flex-direction: column; align-items: center; } ._donutCenter_1pxgs_1521 strong { color: #0b1b3a; font-size: 15px; line-height: 1.2; } ._donutCenter_1pxgs_1521 span { color: #7b879b; font-size: 9px; margin-top: 2px; } ._channelLegend_1pxgs_1571 { display: flex; flex-direction: column; gap: 12px; min-width: 110px; } ._channelLegend_1pxgs_1571 > div { display: flex; align-items: flex-start; gap: 7px; } ._channelLegend_1pxgs_1571 > div > div { display: flex; flex-direction: column; gap: 2px; min-width: 0; } ._channelLegend_1pxgs_1571 strong { color: #26334e; font-size: 9px; font-weight: 600; } ._channelLegend_1pxgs_1571 small { color: #737f94; font-size: 8px; } ._legendDotBlue_1pxgs_1645, ._legendDotOrange_1pxgs_1647 { width: 8px; height: 8px; margin-top: 2px; flex-shrink: 0; border-radius: 50%; } ._legendDotBlue_1pxgs_1645 { background: #3478f6; } ._legendDotOrange_1pxgs_1647 { background: #ff9418; } /* ========================================================= CHANNEL BADGES ========================================================= */ ._smsBadge_1pxgs_1693, ._whatsappBadge_1pxgs_1695, ._emailBadge_1pxgs_1697, ._voiceBadge_1pxgs_1699, ._socialBadge_1pxgs_1701 { display: inline-flex; align-items: center; padding: 4px 8px; border-radius: 5px; font-size: 7px; font-weight: 600; white-space: nowrap; } ._smsBadge_1pxgs_1693 { color: #3478f6; background: #edf4ff; } ._whatsappBadge_1pxgs_1695 { color: #ef8510; background: #fff4e7; } ._emailBadge_1pxgs_1697 { color: #3478f6; background: #edf4ff; } ._voiceBadge_1pxgs_1699 { color: #7c3aed; background: #f3edff; } ._socialBadge_1pxgs_1701 { color: #0d9488; background: #e8faf7; } /* ========================================================= EMAIL HEALTH ========================================================= */ ._emailHealth_1pxgs_1787 { display: grid; grid-template-columns: 1.3fr 1fr 1fr; gap: 8px; margin: 0 16px 14px; padding: 8px 10px; border-top: 1px solid #edf1f6; box-sizing: border-box; } ._emailHealth_1pxgs_1787 > div { display: flex; flex-direction: column; gap: 3px; min-width: 0; } ._emailHealth_1pxgs_1787 > div:first-child { border-right: 1px solid #edf1f6; } ._emailHealth_1pxgs_1787 span { color: #52617a; font-size: 8px; } ._emailHealth_1pxgs_1787 strong { color: #26334e; font-size: 9px; font-weight: 650; } ._emailHealth_1pxgs_1787 small { color: #7b879b; font-size: 8px; } ._healthHealthy_1pxgs_1873 { color: #0e9d62 !important; } ._healthWarning_1pxgs_1881 { color: #d98a12 !important; } /* ========================================================= CAMPAIGN ICONS ========================================================= */ ._campaignIconBlue_1pxgs_1897, ._campaignIconOrange_1pxgs_1899 { width: 26px; height: 26px; flex-shrink: 0; border-radius: 6px; display: flex; align-items: center; justify-content: center; font-size: 12px; } ._campaignIconBlue_1pxgs_1897 { background: #e8f0ff; color: #3478f6; } ._campaignIconOrange_1pxgs_1899 { background: #fff0dd; color: #ff8d19; } ._campaignIconBlue_1pxgs_1897 svg, ._campaignIconOrange_1pxgs_1899 svg { width: 13px; height: 13px; } /* ========================================================= TABLE ========================================================= */ ._tableWrapper_1pxgs_1969 { width: 100%; overflow-x: auto; } ._campaignTable_1pxgs_1979 { width: 100%; min-width: 700px; border-collapse: collapse; border-spacing: 0; } ._campaignTable_1pxgs_1979 th { background: #fafcff; color: #68758d; font-size: 8px; font-weight: 500; text-align: left; padding: 8px 10px; border-top: 1px solid #edf1f6; border-bottom: 1px solid #edf1f6; white-space: nowrap; } ._campaignTable_1pxgs_1979 td { padding: 8px 10px; border-bottom: 1px solid #edf1f6; color: #293650; font-size: 9px; white-space: nowrap; } ._campaignTable_1pxgs_1979 tbody tr:last-child td { border-bottom: none; } ._campaignTable_1pxgs_1979 tbody tr:hover { background: #fbfcff; } /* ========================================================= CAMPAIGN NAME ========================================================= */ ._campaignName_1pxgs_2079 { display: flex; align-items: center; gap: 8px; } ._campaignName_1pxgs_2079 > div:last-child { min-width: 0; display: flex; flex-direction: column; gap: 2px; } ._campaignName_1pxgs_2079 strong { max-width: 180px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; font-size: 9px; color: #1a2845; } ._campaignName_1pxgs_2079 small { color: #7d889c; font-size: 7px; } /* ========================================================= STATUS BADGES ========================================================= */ ._statusBadge_1pxgs_2151 { display: inline-flex; align-items: center; gap: 3px; padding: 4px 7px; border-radius: 5px; font-size: 7px; font-weight: 600; white-space: nowrap; } ._statusBadge_1pxgs_2151 svg { width: 10px; height: 10px; } ._completed_1pxgs_2193 { color: #0e9d62; background: #e9faf3; } ._scheduled_1pxgs_2203 { color: #3478f6; background: #eaf2ff; } ._sending_1pxgs_2213 { color: #7c3aed; background: #f3edff; } ._draft_1pxgs_2223 { color: #68758a; background: #f0f2f5; } ._failed_1pxgs_2233 { color: #ee5757; background: #fff0f0; } ._cancelled_1pxgs_2243 { color: #64748b; background: #eef1f5; } /* ========================================================= DATE ========================================================= */ ._dateCell_1pxgs_2261 { display: flex; flex-direction: column; gap: 2px; } ._dateCell_1pxgs_2261 span { color: #44516a; } ._dateCell_1pxgs_2261 small { color: #7c879a; font-size: 7px; } /* ========================================================= MORE BUTTON ========================================================= */ ._moreButton_1pxgs_2301 { width: 24px; height: 24px; padding: 0; display: flex; align-items: center; justify-content: center; background: transparent; border: none; color: #718097; cursor: pointer; border-radius: 5px; } ._moreButton_1pxgs_2301:hover { background: #f2f5f9; color: #26334e; } ._moreButton_1pxgs_2301 svg { width: 13px; height: 13px; } /* ========================================================= EMPTY TABLE ========================================================= */ ._emptyTable_1pxgs_2369 { min-height: 170px; display: flex; flex-direction: column; align-items: center; justify-content: center; color: #7b879b; } ._emptyTable_1pxgs_2369 svg { width: 21px; height: 21px; margin-bottom: 7px; color: #8795aa; } ._emptyTable_1pxgs_2369 p { margin: 0; color: #66748c; font-size: 10px; } /* ========================================================= VIEW ALL ========================================================= */ ._viewAll_1pxgs_2433 { border: none; background: transparent; color: #3478f6; font-size: 9px; cursor: pointer; padding: 4px 0; } ._viewAll_1pxgs_2433:hover { color: #1f5fd0; text-decoration: underline; } /* ========================================================= CAMPAIGN STATUS ========================================================= */ ._statusContent_1pxgs_2477 { min-height: 200px; padding: 12px 20px 16px; display: flex; align-items: center; justify-content: center; gap: 28px; box-sizing: border-box; } ._statusDonutWrapper_1pxgs_2505 { display: flex; align-items: center; justify-content: center; flex-shrink: 0; } ._statusDonut_1pxgs_2505 { width: 140px; height: 140px; border-radius: 50%; position: relative; display: flex; align-items: center; justify-content: center; } ._statusDonut_1pxgs_2505::after { content: ""; width: 96px; height: 96px; background: #ffffff; border-radius: 50%; position: absolute; } ._statusCenter_1pxgs_2573 { position: relative; z-index: 1; display: flex; flex-direction: column; align-items: center; } ._statusCenter_1pxgs_2573 strong { color: #0b1b3a; font-size: 16px; line-height: 1.2; } ._statusCenter_1pxgs_2573 span { margin-top: 2px; color: #7a869a; font-size: 9px; } ._statusLegend_1pxgs_2623 { display: flex; flex-direction: column; gap: 10px; min-width: 140px; } ._statusLegendItem_1pxgs_2641 { display: grid; grid-template-columns: 8px 1fr auto auto; align-items: center; gap: 6px; font-size: 9px; } ._statusDot_1pxgs_2665 { width: 7px; height: 7px; border-radius: 50%; } ._green_1pxgs_2679 { background: #21b77b; } ._blue_1pxgs_2687 { background: #3478f6; } ._purple_1pxgs_2695 { background: #7c3aed; } ._orange_1pxgs_2703 { background: #ff9418; } ._red_1pxgs_2711 { background: #ff5c67; } ._gray_1pxgs_2719 { background: #94a3b8; } ._statusTitle_1pxgs_2727 { color: #44516a; } ._statusLegendItem_1pxgs_2641 strong { color: #1a2844; font-size: 9px; font-weight: 600; } ._statusLegendItem_1pxgs_2641 small { color: #768298; font-size: 8px; } ._noStatusData_1pxgs_2761 { max-width: 150px; color: #66748c; font-size: 10px; line-height: 1.5; } /* ========================================================= CARD HOVER ========================================================= */ ._chartGrid_1pxgs_823 > ._card_1pxgs_801, ._bottomGrid_1pxgs_837 > ._card_1pxgs_801 { min-width: 0; } /* ========================================================= RESPONSIVE — 1300px ========================================================= */ @media (max-width: 1300px) { ._dashboard_1pxgs_9 { padding: 16px; } ._statsGrid_1pxgs_563 { grid-template-columns: repeat(2, 1fr); } ._chartGrid_1pxgs_823, ._bottomGrid_1pxgs_837 { grid-template-columns: 1fr; } ._chartGrid_1pxgs_823 > ._card_1pxgs_801, ._bottomGrid_1pxgs_837 > ._card_1pxgs_801 { width: 100%; } } /* ========================================================= RESPONSIVE — 900px ========================================================= */ @media (max-width: 900px) { ._header_1pxgs_59 { flex-direction: column; align-items: stretch; } ._headerActions_1pxgs_119 { width: 100%; justify-content: flex-end; } ._monthSelector_1pxgs_139 { min-width: 170px; } ._channelContent_1pxgs_1425 { gap: 20px; } ._statusContent_1pxgs_2477 { gap: 20px; } } /* ========================================================= RESPONSIVE — 768px ========================================================= */ @media (max-width: 768px) { ._dashboard_1pxgs_9 { padding: 12px; } ._header_1pxgs_59 { margin-bottom: 10px; } ._header_1pxgs_59 h1 { font-size: 15px; } ._header_1pxgs_59 p { font-size: 9px; } ._headerActions_1pxgs_119 { justify-content: flex-start; } ._monthSelector_1pxgs_139 { width: 100%; } ._dashboardPeriod_1pxgs_415 { flex-wrap: wrap; gap: 4px; } ._statsGrid_1pxgs_563 { grid-template-columns: 1fr; } ._statCard_1pxgs_577 { min-height: 70px; } ._statInfo_1pxgs_707 > strong { font-size: 19px; } ._cardHeader_1pxgs_849 { padding: 11px 13px; } ._channelContent_1pxgs_1425 { flex-direction: column; height: auto; min-height: 0; padding: 16px; } ._channelLegend_1pxgs_1571 { width: 100%; min-width: 0; display: grid; grid-template-columns: repeat(2, 1fr); gap: 10px; } ._channelQuickStats_1pxgs_1291 { grid-template-columns: repeat(2, 1fr); } ._emailHealth_1pxgs_1787 { grid-template-columns: 1fr 1fr 1fr; } ._statusContent_1pxgs_2477 { flex-direction: column; padding: 20px; } ._statusLegend_1pxgs_2623 { width: 100%; min-width: 0; } ._statusLegendItem_1pxgs_2641 { grid-template-columns: 8px 1fr auto auto; } } /* ========================================================= RESPONSIVE — 560px ========================================================= */ @media (max-width: 560px) { ._dashboard_1pxgs_9 { padding: 10px; } ._headerActions_1pxgs_119 { width: 100%; } ._monthSelector_1pxgs_139 { width: 100%; } ._errorMessage_1pxgs_283 { align-items: flex-start; flex-wrap: wrap; } ._errorMessage_1pxgs_283 span { flex: 1; } ._errorMessage_1pxgs_283 button { margin-left: 20px; } ._chartGrid_1pxgs_823, ._bottomGrid_1pxgs_837 { gap: 10px; } ._channelQuickStats_1pxgs_1291 { grid-template-columns: 1fr 1fr; padding-left: 12px; padding-right: 12px; } ._emailHealth_1pxgs_1787 { margin-left: 12px; margin-right: 12px; } ._channelLegend_1pxgs_1571 { grid-template-columns: 1fr; } ._statusDonut_1pxgs_2505 { width: 130px; height: 130px; } ._statusDonut_1pxgs_2505::after { width: 88px; height: 88px; } } /* ========================================================= RESPONSIVE — 480px ========================================================= */ @media (max-width: 480px) { ._dashboard_1pxgs_9 { padding: 8px; font-size: 10px; } ._header_1pxgs_59 h1 { font-size: 14px; } ._header_1pxgs_59 p { font-size: 9px; } ._dashboardPeriod_1pxgs_415 { font-size: 9px; } ._dashboardPeriod_1pxgs_415 small { width: 100%; font-size: 8px; } ._statsGrid_1pxgs_563 { gap: 9px; margin-bottom: 10px; } ._statCard_1pxgs_577 { padding: 11px 12px; border-radius: 10px; } ._statIcon_1pxgs_647 { width: 38px; height: 38px; } ._statIcon_1pxgs_647 svg { width: 16px; height: 16px; } ._statInfo_1pxgs_707 > span { font-size: 9px; } ._statInfo_1pxgs_707 > strong { font-size: 17px; } ._statInfo_1pxgs_707 small { font-size: 8px; } ._card_1pxgs_801 { border-radius: 10px; } ._cardHeader_1pxgs_849 { min-height: 44px; padding: 9px 11px; } ._cardHeader_1pxgs_849 h3 { font-size: 10px; } ._chartPeriod_1pxgs_893 { font-size: 8px; } ._legend_1pxgs_913 { gap: 10px; margin-top: 6px; } ._legend_1pxgs_913 span { font-size: 8px; } ._lineChart_1pxgs_1029 { height: 170px; padding-left: 5px; padding-right: 8px; } ._yAxis_1pxgs_1049 { width: 25px; } ._yAxis_1pxgs_1049 span { font-size: 7px; } ._xAxis_1pxgs_1167 span { max-width: 65px; font-size: 7px; } ._emptyChart_1pxgs_1229 { height: 135px; } ._emptyChart_1pxgs_1229 p { font-size: 9px; } ._channelContent_1pxgs_1425 { padding: 14px 10px; } ._donut_1pxgs_1453 { width: 120px; height: 120px; } ._donut_1pxgs_1453::after { width: 80px; height: 80px; } ._donutCenter_1pxgs_1521 strong { font-size: 13px; } ._donutCenter_1pxgs_1521 span { font-size: 8px; } ._channelQuickStats_1pxgs_1291 { gap: 6px; padding: 0 10px 10px; } ._channelQuickStat_1pxgs_1291 { padding: 7px; } ._channelQuickStat_1pxgs_1291 > strong { font-size: 12px; } ._channelQuickStat_1pxgs_1291 > small { font-size: 7px; } ._emailHealth_1pxgs_1787 { margin: 0 10px 10px; padding: 7px 6px; gap: 5px; } ._emailHealth_1pxgs_1787 span, ._emailHealth_1pxgs_1787 small { font-size: 7px; } ._emailHealth_1pxgs_1787 strong { font-size: 8px; } ._statusContent_1pxgs_2477 { padding: 16px 10px; } ._statusDonut_1pxgs_2505 { width: 120px; height: 120px; } ._statusDonut_1pxgs_2505::after { width: 80px; height: 80px; } ._statusCenter_1pxgs_2573 strong { font-size: 14px; } ._statusCenter_1pxgs_2573 span { font-size: 8px; } ._statusLegend_1pxgs_2623 { gap: 8px; } ._statusLegendItem_1pxgs_2641 { font-size: 8px; } ._statusLegendItem_1pxgs_2641 strong { font-size: 8px; } ._statusLegendItem_1pxgs_2641 small { font-size: 7px; } } /* ========================================================= SCROLLBAR ========================================================= */ ._tableWrapper_1pxgs_1969::-webkit-scrollbar { height: 5px; } ._tableWrapper_1pxgs_1969::-webkit-scrollbar-track { background: #f5f7fa; border-radius: 10px; } ._tableWrapper_1pxgs_1969::-webkit-scrollbar-thumb { background: #cbd5e1; border-radius: 10px; } ._tableWrapper_1pxgs_1969::-webkit-scrollbar-thumb:hover { background: #aeb9c8; } /* ========================================================= ACCESSIBILITY ========================================================= */ ._monthSelect_1pxgs_139:focus-visible, ._errorMessage_1pxgs_283 button:focus-visible, ._moreButton_1pxgs_2301:focus-visible, ._viewAll_1pxgs_2433:focus-visible { outline: 2px solid rgba(52, 120, 246, 0.35); outline-offset: 2px; } /* ═══════════════════════════════════════════════════════════════════════════ COMMON DELETE CONFIRM MODAL ═══════════════════════════════════════════════════════════════════════════ */ ._overlay_vq2oz_9 { position: fixed; inset: 0; z-index: var(--z-modal); display: flex; align-items: center; justify-content: center; padding: var(--space-4); background: rgba(15, 23, 42, 0.45); backdrop-filter: blur(2px); } /* ================================================================ MODAL ================================================================ */ ._modal_vq2oz_51 { position: relative; width: 100%; max-width: 420px; padding: var(--space-6) var(--space-5) var(--space-5); background: var(--color-white); border: 1px solid var(--border-light); border-radius: var(--radius-lg); box-shadow: var(--shadow-xl); text-align: center; animation: _deleteModalOpen_vq2oz_1 160ms ease; } @keyframes _deleteModalOpen_vq2oz_1 { from { opacity: 0; transform: translateY(8px) scale(0.98); } to { opacity: 1; transform: translateY(0) scale(1); } } /* ================================================================ CLOSE BUTTON ================================================================ */ ._closeButton_vq2oz_129 { position: absolute; top: var(--space-3); right: var(--space-3); width: 30px; height: 30px; display: flex; align-items: center; justify-content: center; padding: 0; border: none; border-radius: var(--radius-md); background: transparent; color: var(--text-secondary); cursor: pointer; transition: background var(--transition-fast), color var(--transition-fast); } ._closeButton_vq2oz_129:hover:not(:disabled) { background: var(--color-bg-light); color: var(--color-danger); } ._closeButton_vq2oz_129:disabled { opacity: 0.5; cursor: not-allowed; } ._closeButton_vq2oz_129 svg { width: 18px; height: 18px; } /* ================================================================ WARNING ICON ================================================================ */ ._iconWrapper_vq2oz_231 { width: 54px; height: 54px; margin: 0 auto var(--space-4); display: flex; align-items: center; justify-content: center; border-radius: var(--radius-full); background: color-mix(in srgb, var(--color-danger) 10%, var(--surface)); color: var(--color-danger); } ._iconWrapper_vq2oz_231 svg { width: 25px; height: 25px; } /* ================================================================ CONTENT ================================================================ */ ._content_vq2oz_283 { display: flex; flex-direction: column; align-items: center; } ._title_vq2oz_297 { margin: 0 0 var(--space-2); font-size: var(--font-size-xl); font-weight: var(--font-weight-bold); color: var(--text-primary-dark); } ._message_vq2oz_317 { margin: 0 0 var(--space-3); font-size: var(--font-size-sm); line-height: 1.5; color: var(--text-secondary); } /* ================================================================ ITEM NAME ================================================================ */ ._itemName_vq2oz_345 { max-width: 100%; margin-bottom: var(--space-3); padding: var(--space-2) var(--space-3); border: 1px solid color-mix(in srgb, var(--color-danger) 20%, var(--line)); border-radius: var(--radius-md); background: color-mix(in srgb, var(--color-danger) 6%, var(--surface)); color: var(--text-primary-dark); font-size: var(--font-size-sm); font-weight: var(--font-weight-semibold); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; } ._warningText_vq2oz_397 { margin: 0; font-size: var(--font-size-xs); color: var(--text-muted); } /* ================================================================ ACTIONS ================================================================ */ ._actions_vq2oz_421 { display: flex; align-items: center; justify-content: center; gap: var(--space-2); margin-top: var(--space-5); } /* ================================================================ RESPONSIVE ================================================================ */ @media (max-width: 480px) { ._overlay_vq2oz_9 { padding: var(--space-3); } ._modal_vq2oz_51 { max-width: 100%; padding: var(--space-5) var(--space-4) var(--space-4); } ._actions_vq2oz_421 { width: 100%; flex-direction: column-reverse; } ._actions_vq2oz_421 .app-btn { width: 100%; } } .custom-toast-wrapper { position: fixed; top: 24px; left: 50%; transform: translateX(-50%); z-index: 9999; } .custom-toast-wrapper > * { pointer-events: auto; } @media (max-width: 480px) { .custom-toast-wrapper { top: 16px; left: 16px; right: 16px; transform: none; width: auto; } } /* Base Toast Styles - Professional Business */ .success-toast, .error-toast, .warning-toast { display: flex; align-items: center; justify-content: space-between; min-width: 280px; max-width: 380px; padding: 0; border-radius: 8px; position: relative; overflow: hidden; animation: toastSlideIn 0.3s ease-out forwards; transition: all 0.2s ease; border: 1px solid; box-shadow: 0 2px 8px rgba(0, 0, 0, 0.08); } /* Exit Animation */ .success-toast.exit, .error-toast.exit, .warning-toast.exit { animation: toastSlideOut 0.25s ease-in forwards; } .success-toast:hover, .error-toast:hover, .warning-toast:hover { transform: translateY(-1px); box-shadow: 0 4px 12px rgba(0, 0, 0, 0.12); } /* Enter Animation */ @keyframes toastSlideIn { from { opacity: 0; transform: translateY(-20px); } to { opacity: 1; transform: translateY(0); } } /* Exit Animation */ @keyframes toastSlideOut { from { opacity: 1; transform: translateY(0); } to { opacity: 0; transform: translateY(-20px); } } /* Pearl Sheen Overlay - Fixed Working Version */ .success-toast::before, .error-toast::before, .warning-toast::before { content: ""; position: absolute; top: 0; left: -100%; width: 100%; height: 100%; background: linear-gradient( 90deg, transparent, rgba(255, 255, 255, 0.4), transparent ); animation: pearlShine 3s infinite; pointer-events: none; z-index: 1; } @keyframes pearlShine { 0% { left: -100%; } 20% { left: 100%; } 100% { left: 100%; } } /* Left & Right Sections */ .success-left, .error-left, .warning-left { display: flex; align-items: center; gap: 12px; flex: 1; padding: 12px 0 12px 16px; position: relative; z-index: 2; } .success-right, .error-right, .warning-right { display: flex; align-items: center; padding: 12px 16px 12px 8px; position: relative; z-index: 2; } /* Icon Container */ .outer-success, .outer-wrong, .outer-warning { width: 32px; height: 32px; border-radius: 6px; display: flex; align-items: center; justify-content: center; font-size: 14px; font-weight: 600; flex-shrink: 0; transition: all 0.2s ease; position: relative; z-index: 2; } /* ==================== COLOR VARIANTS ==================== */ /* SUCCESS */ .success-toast { background: #ffffff; border-color: #10b981; border-left-width: 4px; border-left-style: solid; } .success-message { color: #1f2937; font-size: 13px; line-height: 1.5; font-weight: 500; } .outer-success { background: #ecfdf5; color: #059669; } .success-toast:hover .outer-success { background: #d1fae5; } /* ERROR */ .error-toast { background: #ffffff; border-color: #ef4444; border-left-width: 4px; border-left-style: solid; } .error-message { color: #1f2937; font-size: 13px; line-height: 1.5; font-weight: 500; } .outer-wrong { background: #fef2f2; color: #dc2626; } .error-toast:hover .outer-wrong { background: #fee2e2; } /* WARNING */ .warning-toast { background: #ffffff; border-color: #f59e0b; border-left-width: 4px; border-left-style: solid; } .warning-message { color: #1f2937; font-size: 13px; line-height: 1.5; font-weight: 500; } .outer-warning { background: #fffbeb; color: #d97706; } .warning-toast:hover .outer-warning { background: #fef3c7; } /* Close Button Styling */ .success-right button, .error-right button, .warning-right button { background: transparent; border: none; cursor: pointer; padding: 4px; border-radius: 4px; transition: all 0.2s ease; color: #9ca3af; display: flex; align-items: center; justify-content: center; } .success-right button:hover, .error-right button:hover, .warning-right button:hover { background: #f3f4f6; color: #4b5563; } /* Mobile Adjustments */ @media (max-width: 480px) { .success-toast, .error-toast, .warning-toast { min-width: unset; max-width: 100%; border-radius: 6px; } .success-left, .error-left, .warning-left { padding: 10px 0 10px 12px; gap: 10px; } .success-right, .error-right, .warning-right { padding: 10px 12px 10px 8px; } .outer-success, .outer-wrong, .outer-warning { width: 28px; height: 28px; font-size: 12px; } .success-message, .error-message, .warning-message { font-size: 12px; } } /* ================================================================ STAT ICON — GREEN VARIANT (blue + amber already exist globally as .ct-stat-icon.blue/.amber; this adds the green variant used by Active / Completed) ================================================================ */ ._green_1wly6_13 { background: var(--color-success-soft, #e6f7ec); color: var(--color-success, #16a34a); } /* ================================================================ TABS ================================================================ */ ._tabs_1wly6_33 { display: flex; align-items: center; gap: var(--space-4); border-bottom: 1px solid var(--border-light); } ._tabBtn_1wly6_51 { position: relative; padding: var(--space-2) 0 var(--space-3); border: none; background: transparent; color: var(--text-secondary); font-size: var(--font-size-sm); font-weight: var(--font-weight-medium); cursor: pointer; } ._tabBtn_1wly6_51:hover { color: var(--text-primary-dark); } ._tabActive_1wly6_91 { color: var(--color-primary); font-weight: var(--font-weight-semibold); } ._tabActive_1wly6_91::after { content: ""; position: absolute; left: 0; right: 0; bottom: -1px; height: 2px; border-radius: var(--radius-full); background: var(--color-primary); } /* ================================================================ OPEN RATE CELL ================================================================ */ ._rateCell_1wly6_141 { display: flex; flex-direction: column; gap: 4px; min-width: 90px; } ._rateValue_1wly6_159 { font-size: var(--font-size-xs); font-weight: var(--font-weight-semibold); color: var(--color-success, #16a34a); } ._rateEmpty_1wly6_173 { font-size: var(--font-size-xs); font-weight: var(--font-weight-medium); color: var(--text-secondary); } ._rateTrack_1wly6_187 { width: 100%; height: 5px; border-radius: var(--radius-full); background: var(--border-light); overflow: hidden; } ._rateFill_1wly6_209 { height: 100%; border-radius: var(--radius-full); background: var(--color-success, #16a34a); } ._rateFillEmpty_1wly6_225 { height: 100%; border-radius: var(--radius-full); background: var(--border-light); } /* ================================================================ ACTIONS CELL ================================================================ */ ._actionsCell_1wly6_249 { display: flex; align-items: center; gap: var(--space-2); } /* ================================================================ RESPONSIVE ================================================================ */ @media (max-width: 700px) { ._tabs_1wly6_33 { overflow-x: auto; white-space: nowrap; -ms-overflow-style: none; scrollbar-width: none; } ._tabs_1wly6_33::-webkit-scrollbar { display: none; } }/* ═══════════════════════════════════════════════════════════════════ CONNECT CRMLAH MODAL ═══════════════════════════════════════════════════════════════════ */ /* ================================================================ OVERLAY ================================================================ */ ._overlay_1gkrl_17 { position: fixed; inset: 0; z-index: var(--z-modal-backdrop); display: flex; align-items: center; justify-content: center; padding: var(--space-5); background: color-mix(in srgb, var(--text-primary-dark) 52%, transparent); overflow-y: auto; } /* ================================================================ MODAL ================================================================ */ ._modal_1gkrl_59 { position: relative; z-index: var(--z-modal); width: 100%; max-width: 605px; padding: 30px 34px 26px; background: var(--color-white); border: 1px solid var(--border-light); border-radius: var(--radius-xl); box-shadow: var(--shadow-xl); animation: _crmModalEnter_1gkrl_1 var(--transition-base); } @keyframes _crmModalEnter_1gkrl_1 { from { opacity: 0; transform: translateY(8px) scale(0.98); } to { opacity: 1; transform: translateY(0) scale(1); } } /* ================================================================ HEADER ================================================================ */ ._header_1gkrl_131 { display: flex; align-items: flex-start; justify-content: space-between; gap: var(--space-4); } ._titleGroup_1gkrl_147 { display: flex; align-items: center; gap: var(--space-4); } ._logo_1gkrl_161 { width: 72px; height: 72px; flex-shrink: 0; display: flex; align-items: center; justify-content: center; border: 1px solid color-mix(in srgb, var(--color-primary) 30%, var(--border-light)); border-radius: var(--radius-lg); background: var(--brand-soft); color: var(--color-primary); font-size: 30px; } ._titleContent_1gkrl_205 { min-width: 0; } ._titleContent_1gkrl_205 h2 { margin: 0 0 var(--space-2); color: var(--text-primary-dark); font-size: 27px; line-height: 1.15; font-weight: var(--font-weight-bold); } ._badge_1gkrl_235 { display: inline-flex; align-items: center; padding: var(--space-1) var(--space-3); border-radius: var(--radius-full); background: var(--brand-soft); color: var(--color-primary); font-size: var(--font-size-sm); font-weight: var(--font-weight-medium); } /* ================================================================ CLOSE BUTTON ================================================================ */ ._closeButton_1gkrl_275 { width: 34px; height: 34px; flex-shrink: 0; display: flex; align-items: center; justify-content: center; padding: 0; border: none; border-radius: var(--radius-md); background: transparent; color: var(--text-secondary); font-size: 23px; cursor: pointer; transition: color var(--transition-fast), background-color var(--transition-fast); } ._closeButton_1gkrl_275:hover:not(:disabled) { color: var(--text-primary-dark); background: var(--color-gray-light); } ._closeButton_1gkrl_275:disabled { opacity: 0.6; cursor: not-allowed; } /* ================================================================ DESCRIPTION ================================================================ */ ._description_1gkrl_361 { margin: 20px 0 26px; color: var(--text-secondary); font-size: var(--font-size-base); line-height: 1.5; } /* ================================================================ FORM GROUP ================================================================ */ ._formGroup_1gkrl_389 { margin-bottom: 17px; } ._formGroup_1gkrl_389 .app-label { margin-bottom: var(--space-2); } /* ================================================================ INPUT WRAPPER ================================================================ */ ._inputWrapper_1gkrl_413 { position: relative; width: 100%; display: block; } /* ================================================================ INPUT ================================================================ */ ._inputWrapper_1gkrl_413 input._input_1gkrl_413 { width: 100%; height: 46px; padding-left: 44px !important; padding-right: var(--space-3) !important; padding-top: 0 !important; padding-bottom: 0 !important; line-height: normal; font-size: var(--font-size-base); } ._inputWrapper_1gkrl_413 input._passwordInput_1gkrl_469 { padding-right: 50px !important; } /* ================================================================ LEFT ICON - FIX ================================================================ */ ._inputIcon_1gkrl_485 { position: absolute; left: 15px; top: 50%; z-index: 2; width: 18px; height: 18px; transform: translateY(-50%); color: var(--text-secondary); pointer-events: none; } /* ================================================================ PASSWORD EYE ================================================================ */ ._passwordButton_1gkrl_529 { position: absolute; right: 9px; top: 50%; z-index: 2; width: 34px; height: 34px; transform: translateY(-50%); display: flex; align-items: center; justify-content: center; padding: 0; border: none; border-radius: var(--radius-md); background: transparent; color: var(--text-secondary); font-size: 19px; cursor: pointer; transition: color var(--transition-fast), background-color var(--transition-fast); } ._passwordButton_1gkrl_529:hover:not(:disabled) { color: var(--color-primary); background: var(--brand-soft); } ._passwordButton_1gkrl_529:disabled { opacity: 0.6; cursor: not-allowed; } /* ================================================================ VALIDATION ================================================================ */ ._inputWrapper_1gkrl_413 input._inputError_1gkrl_629 { border-color: var(--color-danger) !important; } ._inputWrapper_1gkrl_413 input._inputError_1gkrl_629:focus { border-color: var(--color-danger) !important; box-shadow: 0 0 0 3px color-mix(in srgb, var(--color-danger) 10%, transparent) !important; } ._errorText_1gkrl_649 { display: block; margin-top: var(--space-1); color: var(--color-danger); font-size: var(--font-size-xs); font-weight: var(--font-weight-medium); } /* ================================================================ PASSWORD BOTTOM ================================================================ */ ._passwordBottom_1gkrl_679 { min-height: 22px; display: flex; align-items: flex-start; justify-content: space-between; gap: var(--space-3); margin-top: var(--space-2); } /* ================================================================ LINK BUTTON ================================================================ */ ._linkButton_1gkrl_711 { padding: 0; border: none; background: transparent; color: var(--color-primary); font-family: inherit; font-size: var(--font-size-sm); font-weight: var(--font-weight-medium); cursor: pointer; white-space: nowrap; transition: color var(--transition-fast); } ._linkButton_1gkrl_711:hover:not(:disabled) { color: var(--color-primary-dark); } ._linkButton_1gkrl_711:disabled { opacity: 0.6; cursor: not-allowed; } /* ================================================================ SECURITY BOX ================================================================ */ ._securityBox_1gkrl_777 { width: 100%; display: flex; align-items: center; gap: var(--space-3); margin-bottom: 18px; padding: 12px 16px; border: 1px solid color-mix(in srgb, var(--color-primary) 28%, var(--border-light)); border-radius: var(--radius-md); background: var(--brand-soft); color: var(--text-secondary); font-size: var(--font-size-sm); line-height: 1.5; } ._securityIcon_1gkrl_829 { width: 26px; height: 26px; flex-shrink: 0; display: flex; align-items: center; justify-content: center; color: var(--color-primary); font-size: 20px; } /* ================================================================ ACTIONS ================================================================ */ ._actions_1gkrl_867 { display: flex; flex-direction: column; align-items: center; gap: 13px; } ._primaryButton_1gkrl_883 { width: 100%; min-height: 48px; font-size: var(--font-size-base); font-weight: var(--font-weight-semibold); } ._cancelButton_1gkrl_903 { min-width: 100px; min-height: 40px; font-size: var(--font-size-base); } /* ================================================================ DIVIDER ================================================================ */ ._divider_1gkrl_927 { width: 100%; height: 1px; margin: 19px 0; background: var(--border-light); } /* ================================================================ HELP ================================================================ */ ._helpText_1gkrl_953 { display: flex; align-items: center; justify-content: center; gap: var(--space-1); color: var(--text-secondary); font-size: var(--font-size-sm); text-align: center; } /* ================================================================ TABLET ================================================================ */ @media (max-width: 700px) { ._overlay_1gkrl_17 { padding: var(--space-4); } ._modal_1gkrl_59 { max-height: calc(100vh - 32px); overflow-y: auto; padding: var(--space-5); } ._logo_1gkrl_161 { width: 56px; height: 56px; font-size: 24px; } ._titleContent_1gkrl_205 h2 { font-size: var(--font-size-xl); } ._description_1gkrl_361 { margin-bottom: var(--space-5); } } /* ================================================================ MOBILE ================================================================ */ @media (max-width: 480px) { ._overlay_1gkrl_17 { padding: var(--space-3); } ._modal_1gkrl_59 { padding: var(--space-4); border-radius: var(--radius-lg); } ._titleGroup_1gkrl_147 { gap: var(--space-3); } ._logo_1gkrl_161 { width: 48px; height: 48px; font-size: 21px; } ._titleContent_1gkrl_205 h2 { font-size: var(--font-size-lg); } ._inputWrapper_1gkrl_413 input._input_1gkrl_413 { height: 44px; } ._securityBox_1gkrl_777 { align-items: flex-start; padding: var(--space-3); } ._helpText_1gkrl_953 { flex-wrap: wrap; } } /* ═══════════════════════════════════════════════════════════════════════════ CONTACT / ADD CONTACT PAGE ═══════════════════════════════════════════════════════════════════════════ */ ._page_14cuv_9 { width: 100%; min-width: 0; display: flex; flex-direction: column; gap: var(--space-4); padding-top: var(--space-4); box-sizing: border-box; } /* ================================================================ PAGE HEADER ================================================================ */ ._pageHeader_14cuv_45 { width: 100%; display: flex; align-items: flex-start; justify-content: space-between; gap: var(--space-4); } ._pageTitle_14cuv_65 { margin: 0 0 var(--space-1); font-size: var(--font-size-2xl); font-weight: var(--font-weight-bold); color: var(--text-primary-dark); } ._pageDescription_14cuv_85 { margin: 0; font-size: var(--font-size-xs); color: var(--text-secondary); } ._headerActions_14cuv_101 { display: flex; align-items: center; gap: var(--space-2); flex-shrink: 0; } /* ================================================================ COMMON CARD ================================================================ */ ._card_14cuv_127, ._formCard_14cuv_129 { width: 100%; background: var(--color-white); border: 1px solid var(--border-light); border-radius: var(--radius-lg); box-shadow: var(--shadow-sm); box-sizing: border-box; } ._card_14cuv_127 { padding: var(--space-4); } ._formCard_14cuv_129 { padding: var(--space-4); } /* ================================================================ SECTION TITLE ================================================================ */ ._sectionTitle_14cuv_181 { margin: 0 0 var(--space-3); font-size: var(--font-size-base); font-weight: var(--font-weight-semibold); color: var(--text-primary-dark); } /* ================================================================ ADD METHOD ================================================================ */ ._methodGrid_14cuv_209 { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: var(--space-3); } ._methodCard_14cuv_225 { position: relative; min-height: 70px; display: flex; align-items: center; gap: var(--space-3); padding: var(--space-3) var(--space-4); border: 1px solid var(--border-default); border-radius: var(--radius-md); background: var(--color-white); color: var(--text-primary-dark); text-align: left; cursor: pointer; transition: border-color var(--transition-fast), background var(--transition-fast), box-shadow var(--transition-fast); } ._methodCard_14cuv_225:hover { border-color: var(--color-primary); background: var(--color-bg-light); } ._methodActive_14cuv_297 { border-color: var(--color-primary); background: var(--color-bg-light); box-shadow: 0 0 0 1px var(--color-primary); } ._methodIcon_14cuv_313 { width: 36px; height: 36px; flex-shrink: 0; display: flex; align-items: center; justify-content: center; color: var(--text-primary-dark); font-size: 22px; } ._methodContent_14cuv_343 { min-width: 0; display: flex; flex-direction: column; gap: var(--space-1); } ._methodContent_14cuv_343 strong { font-size: var(--font-size-sm); font-weight: var(--font-weight-semibold); color: var(--text-primary-dark); } ._methodContent_14cuv_343 small { font-size: var(--font-size-xs); color: var(--text-secondary); } ._selectedIcon_14cuv_389 { position: absolute; top: var(--space-2); right: var(--space-2); width: 18px; height: 18px; display: flex; align-items: center; justify-content: center; border-radius: var(--radius-full); background: var(--color-primary); color: var(--color-white); font-size: 11px; } /* ================================================================ FORM SECTIONS ================================================================ */ ._formSection_14cuv_441 { padding-bottom: var(--space-4); margin-bottom: var(--space-4); border-bottom: 1px solid var(--border-light); } ._lastSection_14cuv_457 { padding-bottom: 0; margin-bottom: 0; border-bottom: none; } /* ================================================================ PAGE FORM GRID ================================================================ */ ._formGrid_14cuv_481 { width: 100%; display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); column-gap: var(--space-4); row-gap: var(--space-3); } ._formGroup_14cuv_505 { min-width: 0; } ._formGroup_14cuv_505 > label, ._notesGroup_14cuv_515 > label { display: block; margin-bottom: var(--space-1); color: var(--text-primary-dark); font-size: var(--font-size-xs); font-weight: var(--font-weight-medium); } ._formGroup_14cuv_505 > label span { color: var(--color-danger); } /* ================================================================ PAGE INPUT ================================================================ */ ._formGroup_14cuv_505 .app-input, ._formGroup_14cuv_505 .app-select { height: 34px; padding-top: 0; padding-bottom: 0; } /* ================================================================ PAGE PHONE FIELD ================================================================ */ ._phoneField_14cuv_579 { width: 100%; display: flex; } ._countryCode_14cuv_591 { position: relative; width: 72px; flex-shrink: 0; } ._countryCode_14cuv_591 select { width: 100%; height: 34px; padding: 0 25px 0 var(--space-2); border: 1px solid var(--border-default); border-right: none; border-radius: var(--radius-md) 0 0 var(--radius-md); background: var(--color-white); color: var(--text-primary-dark); font-family: inherit; font-size: var(--font-size-sm); appearance: none; outline: none; } ._countryCode_14cuv_591:focus-within select { border-color: var(--color-primary); } ._countryCode_14cuv_591 svg { position: absolute; top: 50%; right: var(--space-2); transform: translateY(-50%); width: 12px; height: 12px; color: var(--text-secondary); pointer-events: none; } ._phoneField_14cuv_579 .app-input { height: 34px; border-radius: 0 var(--radius-md) var(--radius-md) 0; } /* ================================================================ TAGS ================================================================ */ ._tagsInput_14cuv_717 { position: relative; width: 100%; min-height: 34px; display: flex; align-items: center; padding: 3px 30px 3px var(--space-2); border: 1px solid var(--border-default); border-radius: var(--radius-md); background: var(--color-white); } ._tagsInput_14cuv_717:focus-within { border-color: var(--color-primary); } ._tagsList_14cuv_761 { display: flex; align-items: center; gap: var(--space-1); flex-wrap: wrap; } ._tag_14cuv_717 { display: inline-flex; align-items: center; gap: 4px; padding: 2px 6px; border-radius: var(--radius-sm); background: var(--brand-soft); color: var(--brand-ink); font-size: 10px; font-weight: var(--font-weight-medium); } ._tag_14cuv_717 button { width: 13px; height: 13px; display: flex; align-items: center; justify-content: center; padding: 0; border: none; background: transparent; color: inherit; cursor: pointer; } ._tag_14cuv_717 button svg { width: 11px; height: 11px; } ._tagsArrow_14cuv_865 { position: absolute; top: 50%; right: var(--space-2); transform: translateY(-50%); width: 13px; height: 13px; color: var(--text-secondary); pointer-events: none; } /* ================================================================ CHANNELS ================================================================ */ ._channels_14cuv_905 { min-height: 34px; display: flex; align-items: center; gap: var(--space-4); } ._checkboxLabel_14cuv_923 { display: inline-flex !important; align-items: center; gap: var(--space-2); margin: 0 !important; cursor: pointer; } ._checkboxLabel_14cuv_923 input { width: 14px; height: 14px; margin: 0; accent-color: var(--color-primary); cursor: pointer; } ._checkboxLabel_14cuv_923 span { color: var(--text-primary-dark) !important; } /* ================================================================ NOTES ================================================================ */ ._notesGroup_14cuv_515 { margin-top: var(--space-3); } ._notesGroup_14cuv_515 textarea { width: 100%; min-height: 58px; resize: vertical; } /* ═══════════════════════════════════════════════════════════════════════════ ADD CONTACT MODAL ═══════════════════════════════════════════════════════════════════════════ */ /* ================================================================ OVERLAY ================================================================ */ ._overlay_14cuv_1025 { position: fixed; inset: 0; z-index: var(--z-modal); display: flex; align-items: center; justify-content: center; padding: var(--space-4); background: rgba(15, 23, 42, 0.45); backdrop-filter: blur(2px); } /* ================================================================ MODAL ================================================================ */ ._modal_14cuv_1069 { width: 100%; max-width: 680px; max-height: 90vh; display: flex; flex-direction: column; overflow: hidden; background: var(--color-white); border: 1px solid var(--border-light); border-radius: var(--radius-lg); box-shadow: var(--shadow-xl); animation: _modalOpen_14cuv_1 160ms ease; } @keyframes _modalOpen_14cuv_1 { from { opacity: 0; transform: translateY(8px) scale(0.98); } to { opacity: 1; transform: translateY(0) scale(1); } } /* ================================================================ MODAL HEADER ================================================================ */ ._modalHeader_14cuv_1151 { display: flex; align-items: flex-start; justify-content: space-between; gap: var(--space-4); padding: var(--space-4) var(--space-5); border-bottom: 1px solid var(--border-light); } ._modalTitle_14cuv_1177 { margin: 0 0 var(--space-1); font-size: var(--font-size-xl); font-weight: var(--font-weight-bold); color: var(--text-primary-dark); } ._modalDescription_14cuv_1197 { margin: 0; font-size: var(--font-size-xs); color: var(--text-secondary); } /* ================================================================ CLOSE BUTTON ================================================================ */ ._closeButton_14cuv_1221 { width: 32px; height: 32px; flex-shrink: 0; display: flex; align-items: center; justify-content: center; padding: 0; border: none; border-radius: var(--radius-md); background: transparent; color: var(--text-secondary); cursor: pointer; transition: background var(--transition-fast), color var(--transition-fast); } ._closeButton_14cuv_1221:hover { background: var(--color-bg-light); color: var(--color-danger); } ._closeButton_14cuv_1221 svg { width: 19px; height: 19px; } /* ================================================================ MODAL BODY ================================================================ */ ._modalBody_14cuv_1305 { padding: var(--space-5); overflow-y: auto; } /* ================================================================ MODAL FORM Scoped inside .modal to avoid conflict with page form ================================================================ */ ._modal_14cuv_1069 ._formGrid_14cuv_481 { width: 100%; display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); column-gap: var(--space-4); row-gap: var(--space-4); } ._modal_14cuv_1069 ._formGroup_14cuv_505 { min-width: 0; } ._modal_14cuv_1069 ._formGroup_14cuv_505 > label { display: block; margin-bottom: var(--space-2); font-size: var(--font-size-xs); font-weight: var(--font-weight-medium); color: var(--text-primary-dark); } ._modal_14cuv_1069 ._formGroup_14cuv_505 > label span { margin-left: 2px; color: var(--color-danger); } /* ================================================================ MODAL INPUT ================================================================ */ ._modal_14cuv_1069 ._formGroup_14cuv_505 .app-input, ._modal_14cuv_1069 ._formGroup_14cuv_505 .app-select { height: 40px; } /* ================================================================ MODAL PHONE ================================================================ */ ._modal_14cuv_1069 ._phoneField_14cuv_579 { width: 100%; display: flex; } ._modal_14cuv_1069 ._countryCode_14cuv_591 { position: relative; width: 82px; flex-shrink: 0; } ._modal_14cuv_1069 ._countryCode_14cuv_591 select { width: 100%; height: 40px; padding: 0 26px 0 var(--space-2); border: 1px solid var(--border-default); border-right: none; border-radius: var(--radius-md) 0 0 var(--radius-md); background: var(--color-white); color: var(--text-primary-dark); font-family: inherit; font-size: var(--font-size-sm); appearance: none; outline: none; cursor: pointer; transition: border-color var(--transition-fast), box-shadow var(--transition-fast); } ._modal_14cuv_1069 ._countryCode_14cuv_591:focus-within select { border-color: var(--color-primary); } ._modal_14cuv_1069 ._countryCode_14cuv_591 svg { position: absolute; top: 50%; right: var(--space-2); width: 13px; height: 13px; transform: translateY(-50%); color: var(--text-secondary); pointer-events: none; } ._modal_14cuv_1069 ._phoneField_14cuv_579 .app-input { min-width: 0; flex: 1; height: 40px; border-radius: 0 var(--radius-md) var(--radius-md) 0; } /* ================================================================ MODAL ADDRESS ================================================================ */ ._modal_14cuv_1069 ._addressField_14cuv_1579 { grid-column: 1 / -1; } ._modal_14cuv_1069 ._addressField_14cuv_1579 .app-textarea { width: 100%; min-height: 85px; resize: vertical; } /* ================================================================ MODAL FOOTER ================================================================ */ ._modalFooter_14cuv_1611 { display: flex; align-items: center; justify-content: flex-end; gap: var(--space-2); padding: var(--space-4) var(--space-5); border-top: 1px solid var(--border-light); background: var(--color-white); } /* ═══════════════════════════════════════════════════════════════════════════ RESPONSIVE ═══════════════════════════════════════════════════════════════════════════ */ /* ================================================================ TABLET ================================================================ */ @media (max-width: 1100px) { ._formGrid_14cuv_481 { grid-template-columns: repeat(2, minmax(0, 1fr)); } } /* ================================================================ SMALL TABLET ================================================================ */ @media (max-width: 900px) { ._methodGrid_14cuv_209 { grid-template-columns: 1fr; } } /* ================================================================ MOBILE ================================================================ */ @media (max-width: 700px) { /* ================================================================ PAGE HEADER ================================================================ */ ._pageHeader_14cuv_45 { flex-direction: column; } ._headerActions_14cuv_101 { width: 100%; } ._headerActions_14cuv_101 .app-btn { flex: 1; } /* ================================================================ PAGE FORM ================================================================ */ ._formGrid_14cuv_481 { grid-template-columns: 1fr; } /* ================================================================ CONTACT LIST ACTION BUTTONS Row 1: Import Excel | Connect CRMlah Row 2: Add Contact ================================================================ */ .ct-contact-actions { width: 100%; display: grid !important; grid-template-columns: repeat(2, minmax(0, 1fr)) !important; gap: var(--space-2) !important; } .ct-contact-actions .app-btn { width: 100%; min-width: 0; justify-content: center; padding-left: var(--space-2); padding-right: var(--space-2); } .ct-contact-actions .app-btn:last-child { grid-column: 1 / -1; } /* ================================================================ MODAL OVERLAY ================================================================ */ ._overlay_14cuv_1025 { align-items: flex-start; padding: var(--space-3); overflow-y: auto; } /* ================================================================ MODAL ================================================================ */ ._modal_14cuv_1069 { width: 100%; max-width: 100%; max-height: calc(100dvh - 24px); } ._modalHeader_14cuv_1151 { padding: var(--space-4); } ._modalBody_14cuv_1305 { padding: var(--space-4); } ._modal_14cuv_1069 ._formGrid_14cuv_481 { grid-template-columns: 1fr; gap: var(--space-3); } ._modal_14cuv_1069 ._addressField_14cuv_1579 { grid-column: auto; } ._modalFooter_14cuv_1611 { padding: var(--space-4); flex-direction: column-reverse; } ._modalFooter_14cuv_1611 .app-btn { width: 100%; } } /* ================================================================ SMALL MOBILE ================================================================ */ @media (max-width: 420px) { .ct-contact-actions { gap: var(--space-2) !important; } .ct-contact-actions .app-btn { min-height: 40px; padding-left: 6px; padding-right: 6px; font-size: var(--font-size-xs); } .ct-contact-actions .app-btn svg { flex-shrink: 0; } ._modalHeader_14cuv_1151 { gap: var(--space-2); } ._modalTitle_14cuv_1177 { font-size: var(--font-size-lg); } ._modalBody_14cuv_1305 { padding: var(--space-3); } ._modalFooter_14cuv_1611 { padding: var(--space-3); } ._modal_14cuv_1069 ._countryCode_14cuv_591 { width: 76px; } } /* make the name field full width */ ._fullWidthField_14cuv_2013 { grid-column: 1 / -1; } /* ═══════════════════════════════════════════════════════════════ DOMAIN VIEW ═══════════════════════════════════════════════════════════════ */ ._page_dk6y5_9 { width: 100%; min-width: 0; display: flex; flex-direction: column; gap: var(--space-5); padding-bottom: var(--space-6); box-sizing: border-box; } /* ================================================================ HEADER ================================================================ */ ._pageHeader_dk6y5_45 { width: 100%; display: flex; align-items: flex-start; justify-content: space-between; gap: var(--space-5); } ._headerContent_dk6y5_67 { min-width: 0; } ._titleRow_dk6y5_75 { display: flex; align-items: center; gap: var(--space-3); flex-wrap: wrap; } ._titleRow_dk6y5_75 h1 { margin: 0; color: var(--text-primary-dark); font-size: var(--font-size-2xl); font-weight: var(--font-weight-bold); line-height: 1.2; } ._headerContent_dk6y5_67 > p { margin: var(--space-2) 0 0; color: var(--text-secondary); font-size: var(--font-size-sm); } /* ================================================================ AUTHENTICATED BADGE ================================================================ */ ._authenticatedBadge_dk6y5_141 { display: inline-flex; align-items: center; gap: 6px; padding: 5px 10px; border: 1px solid color-mix(in srgb, var(--color-success) 20%, var(--border-light)); border-radius: var(--radius-full); background: color-mix(in srgb, var(--color-success) 10%, var(--color-white)); color: var(--color-success); font-size: var(--font-size-xs); font-weight: var(--font-weight-semibold); } ._authenticatedBadge_dk6y5_141 svg { width: 14px; height: 14px; } /* ================================================================ HEADER ACTIONS ================================================================ */ ._headerActions_dk6y5_205 { display: flex; align-items: center; justify-content: flex-end; gap: var(--space-2); flex-wrap: wrap; flex-shrink: 0; } /* ================================================================ DNS HELP ================================================================ */ ._helpButton_dk6y5_239 { flex-basis: 100%; display: inline-flex; align-items: center; justify-content: flex-end; gap: 5px; margin-top: var(--space-1); padding: 0; border: none; background: transparent; color: var(--color-primary); font-family: inherit; font-size: var(--font-size-xs); font-weight: var(--font-weight-medium); cursor: pointer; transition: color var(--transition-fast); } ._helpButton_dk6y5_239:hover { color: var(--color-primary-dark); } ._helpButton_dk6y5_239 svg { width: 14px; height: 14px; } /* ================================================================ SUMMARY ================================================================ */ ._summaryGrid_dk6y5_327 { width: 100%; display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: var(--space-4); } ._summaryCard_dk6y5_347 { min-width: 0; min-height: 76px; display: flex; align-items: center; gap: var(--space-4); padding: var(--space-4); border: 1px solid var(--border-light); border-radius: var(--radius-lg); background: var(--color-white); box-shadow: var(--shadow-sm); } ._summaryIcon_dk6y5_389 { width: 36px; height: 36px; flex-shrink: 0; display: flex; align-items: center; justify-content: center; border-radius: var(--radius-full); background: var(--color-success); color: var(--color-white); } ._summaryIcon_dk6y5_389 svg { width: 19px; height: 19px; stroke-width: 3; } ._summaryCard_dk6y5_347 h3 { margin: 0 0 var(--space-1); color: var(--text-primary-dark); font-size: var(--font-size-sm); font-weight: var(--font-weight-semibold); } ._summaryCard_dk6y5_347 p { margin: 0; color: var(--color-success); font-size: var(--font-size-xs); } ._summaryCard_dk6y5_347 ._lastChecked_dk6y5_475 { color: var(--text-secondary); } /* ================================================================ SECTION ================================================================ */ ._section_dk6y5_491 { width: 100%; min-width: 0; display: flex; flex-direction: column; gap: var(--space-3); } ._sectionHeader_dk6y5_513 h2 { margin: 0 0 var(--space-1); color: var(--text-primary-dark); font-size: var(--font-size-lg); font-weight: var(--font-weight-bold); } ._sectionHeader_dk6y5_513 p { margin: 0; color: var(--text-secondary); font-size: var(--font-size-xs); } /* ================================================================ RECORD GRIDS ================================================================ */ ._authGrid_dk6y5_557 { width: 100%; display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: var(--space-3); } ._brandGrid_dk6y5_577 { width: 100%; display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: var(--space-3); } /* ================================================================ RECORD CARD ================================================================ */ ._recordCard_dk6y5_605 { min-width: 0; padding: var(--space-4); border: 1px solid var(--border-light); border-radius: var(--radius-lg); background: var(--color-white); box-shadow: var(--shadow-sm); } ._recordHeader_dk6y5_633 { display: flex; align-items: center; justify-content: space-between; gap: var(--space-3); margin-bottom: var(--space-3); } ._recordHeader_dk6y5_633 h3 { margin: 0; color: var(--text-primary-dark); font-size: var(--font-size-sm); font-weight: var(--font-weight-bold); } /* ================================================================ VERIFIED BADGE ================================================================ */ ._verifiedBadge_dk6y5_683 { flex-shrink: 0; display: inline-flex; align-items: center; gap: 4px; padding: 3px 7px; border: 1px solid color-mix(in srgb, var(--color-success) 18%, var(--border-light)); border-radius: var(--radius-full); background: color-mix(in srgb, var(--color-success) 10%, var(--color-white)); color: var(--color-success); font-size: 10px; font-weight: var(--font-weight-semibold); } ._verifiedBadge_dk6y5_683 svg { width: 12px; height: 12px; } /* ================================================================ RECORD ROWS ================================================================ */ ._recordRows_dk6y5_751 { display: flex; flex-direction: column; gap: var(--space-2); } ._recordRow_dk6y5_751 { width: 100%; min-width: 0; display: grid; grid-template-columns: 95px minmax(0, 1fr); align-items: center; gap: var(--space-2); } ._recordLabel_dk6y5_797 { color: var(--text-secondary); font-size: var(--font-size-xs); } /* ================================================================ TYPE ================================================================ */ ._typeValue_dk6y5_817 { width: fit-content; min-width: 55px; padding: 3px var(--space-2); border: 1px solid var(--border-light); border-radius: var(--radius-sm); background: var(--color-bg-light); color: var(--text-secondary); font-size: 10px; text-align: center; } /* ================================================================ VALUE FIELD ================================================================ */ ._valueField_dk6y5_865 { width: 100%; min-width: 0; height: 30px; display: flex; align-items: center; border: 1px solid var(--border-light); border-radius: var(--radius-sm); background: var(--color-bg-light); overflow: hidden; } ._valueField_dk6y5_865 > span { min-width: 0; flex: 1; padding: 0 var(--space-2); overflow: hidden; color: var(--text-secondary); font-size: var(--font-size-xs); white-space: nowrap; text-overflow: ellipsis; } /* ================================================================ COPY BUTTON ================================================================ */ ._copyButton_dk6y5_947 { width: 30px; height: 100%; flex-shrink: 0; display: inline-flex; align-items: center; justify-content: center; padding: 0; border: none; border-left: 1px solid var(--border-light); background: var(--color-white); color: var(--text-secondary); cursor: pointer; transition: color var(--transition-fast), background var(--transition-fast); } ._copyButton_dk6y5_947:hover { color: var(--color-primary); background: var(--color-bg-light); } ._copyButton_dk6y5_947:active { background: color-mix(in srgb, var(--color-primary) 8%, var(--color-white)); } ._copyButton_dk6y5_947 svg { width: 13px; height: 13px; } /* ================================================================ MATCH MESSAGE ================================================================ */ ._matchMessage_dk6y5_1041 { display: flex; align-items: center; gap: 5px; margin-top: var(--space-3); color: var(--color-success); font-size: 10px; } ._matchMessage_dk6y5_1041 svg { width: 12px; height: 12px; flex-shrink: 0; } /* ================================================================ RESPONSIVE - TABLET ================================================================ */ @media (max-width: 1100px) { ._brandGrid_dk6y5_577 { grid-template-columns: repeat(2, minmax(0, 1fr)); } } /* ================================================================ RESPONSIVE - 900 ================================================================ */ @media (max-width: 900px) { ._pageHeader_dk6y5_45 { flex-direction: column; } ._headerActions_dk6y5_205 { width: 100%; justify-content: flex-start; } ._helpButton_dk6y5_239 { flex-basis: auto; margin-left: 0; justify-content: flex-start; } ._summaryGrid_dk6y5_327 { grid-template-columns: 1fr; } ._authGrid_dk6y5_557 { grid-template-columns: 1fr; } ._brandGrid_dk6y5_577 { grid-template-columns: 1fr; } } /* ================================================================ RESPONSIVE - MOBILE ================================================================ */ @media (max-width: 560px) { ._titleRow_dk6y5_75 h1 { font-size: var(--font-size-xl); } ._headerActions_dk6y5_205 { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: var(--space-2); } ._headerActions_dk6y5_205 .app-btn { width: 100%; } ._headerActions_dk6y5_205 .app-btn-primary { grid-column: 1 / -1; } ._helpButton_dk6y5_239 { grid-column: 1 / -1; width: 100%; justify-content: flex-start; } ._recordRow_dk6y5_751 { grid-template-columns: 68px minmax(0, 1fr); } ._recordCard_dk6y5_605 { padding: var(--space-3); } } /* ═══════════════════════════════════════════════════════════════ EMAIL TEMPLATES ═══════════════════════════════════════════════════════════════ */ /* ================================================================ STAT ICON ================================================================ */ ._statIcon_tcjfk_17 { width: 42px; height: 42px; flex-shrink: 0; display: flex; align-items: center; justify-content: center; border-radius: var(--radius-full); font-size: 20px; } ._statIcon_tcjfk_17 svg { width: 20px; height: 20px; } /* ================================================================ ALL TEMPLATES ================================================================ */ ._statAll_tcjfk_65 { color: var(--color-primary); background: color-mix(in srgb, var(--color-primary) 10%, var(--color-white)); border: 1px solid color-mix(in srgb, var(--color-primary) 15%, var(--border-light)); } /* ================================================================ ACTIVE ================================================================ */ ._statActive_tcjfk_91 { color: var(--color-success); background: color-mix(in srgb, var(--color-success) 10%, var(--color-white)); border: 1px solid color-mix(in srgb, var(--color-success) 18%, var(--border-light)); } /* ================================================================ DRAFT ================================================================ */ ._statDraft_tcjfk_117 { color: var(--color-warning); background: color-mix(in srgb, var(--color-warning) 10%, var(--color-white)); border: 1px solid color-mix(in srgb, var(--color-warning) 18%, var(--border-light)); } /* ================================================================ TEMPLATE CELL ================================================================ */ ._templateCell_tcjfk_143 { min-width: 0; display: flex; align-items: center; gap: var(--space-3); } /* ================================================================ TEMPLATE PREVIEW ================================================================ */ ._templatePreview_tcjfk_169 { width: 38px; height: 48px; flex-shrink: 0; padding: 5px; display: flex; flex-direction: column; gap: 3px; border: 1px solid var(--border-light); border-radius: var(--radius-sm); background: var(--color-white); box-shadow: var(--shadow-sm); } ._previewHeader_tcjfk_213 { width: 100%; height: 4px; border-radius: var(--radius-sm); background: var(--color-primary); } ._previewLine_tcjfk_231 { width: 75%; height: 2px; border-radius: var(--radius-full); background: var(--border-default); } ._previewLineShort_tcjfk_249 { width: 52%; height: 2px; border-radius: var(--radius-full); background: var(--border-light); } ._previewBlock_tcjfk_267 { width: 100%; flex: 1; margin-top: 1px; border-radius: var(--radius-sm); background: var(--color-bg-light); } /* ================================================================ TEMPLATE META ================================================================ */ ._templateMeta_tcjfk_299 { min-width: 0; display: flex; flex-direction: column; gap: 2px; } ._templateMeta_tcjfk_299 strong { max-width: 180px; color: var(--text-primary-dark); font-size: var(--font-size-xs); font-weight: var(--font-weight-semibold); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; } ._templateMeta_tcjfk_299 span { color: var(--text-muted); font-size: 10px; } /* ================================================================ TABLET ================================================================ */ @media (max-width: 900px) { ._templateMeta_tcjfk_299 strong { max-width: 150px; } } /* ================================================================ MOBILE ================================================================ */ @media (max-width: 560px) { ._statIcon_tcjfk_17 { width: 38px; height: 38px; } ._statIcon_tcjfk_17 svg { width: 18px; height: 18px; } ._templatePreview_tcjfk_169 { width: 34px; height: 43px; } ._templateMeta_tcjfk_299 strong { max-width: 125px; } } /* ═══════════════════════════════════════════════════════════════════════════ CREATE EMAIL TEMPLATE ═══════════════════════════════════════════════════════════════════════════ */ ._headerActions_pyxp7_9 { flex-wrap: wrap; } ._pageGrid_pyxp7_17 { width: 100%; min-width: 0; display: grid; grid-template-columns: minmax(0, 1.08fr) minmax(0, 0.92fr); gap: var(--space-4); align-items: stretch; } ._card_pyxp7_35 { width: 100%; min-width: 0; padding: var(--space-4); border: 1px solid var(--border-light); border-radius: var(--radius-lg); background: var(--color-white); box-shadow: var(--shadow-sm); box-sizing: border-box; } ._cardTitle_pyxp7_57 { margin: 0 0 var(--space-4); color: var(--text-primary-dark); font-size: var(--font-size-lg); font-weight: var(--font-weight-bold); } /* ================================================================ FORM ================================================================ */ ._detailsGrid_pyxp7_79 { width: 100%; display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: var(--space-4); } ._formGroup_pyxp7_93 { min-width: 0; } ._formGroup_pyxp7_93 > label, ._editorGroup_pyxp7_103 > label, ._attachments_pyxp7_105 > label { display: block; margin-bottom: var(--space-2); color: var(--text-primary-dark); font-size: var(--font-size-xs); font-weight: var(--font-weight-semibold); } ._formGroup_pyxp7_93 > label span, ._editorGroup_pyxp7_103 > label span { margin-left: 2px; color: var(--color-danger); } ._formGroup_pyxp7_93 .app-input, ._formGroup_pyxp7_93 .app-select { height: 40px; } ._inputError_pyxp7_143 { border-color: var(--color-danger) !important; } ._fieldError_pyxp7_151 { display: block; margin-top: 5px; color: var(--color-danger); font-size: 10px; line-height: 1.35; } ._fullWidthGroup_pyxp7_167 { grid-column: 1 / -1; } ._textContentGroup_pyxp7_175 { margin-top: var(--space-4); } ._textContentGroup_pyxp7_175 > label { display: block; margin-bottom: var(--space-2); color: var(--text-primary-dark); font-size: var(--font-size-xs); font-weight: var(--font-weight-semibold); } ._textContentInput_pyxp7_199 { width: 100%; min-height: 96px !important; height: auto !important; padding: var(--space-3); resize: vertical; line-height: 1.55; box-sizing: border-box; } ._senderSelect_pyxp7_219 { position: relative; width: 100%; } ._senderSelect_pyxp7_219 .app-select { appearance: none; padding-right: 62px; } ._senderVerified_pyxp7_239, ._senderArrow_pyxp7_241 { position: absolute; top: 50%; transform: translateY(-50%); pointer-events: none; } ._senderVerified_pyxp7_239 { right: 34px; width: 16px; height: 16px; color: var(--color-success); } ._senderArrow_pyxp7_241 { right: 12px; width: 14px; height: 14px; color: var(--text-secondary); } ._subjectGroup_pyxp7_283 { grid-column: 1 / -1; } ._subjectField_pyxp7_291 { width: 100%; display: grid; grid-template-columns: minmax(0, 1fr) auto; gap: var(--space-2); } ._variableButtonWrapper_pyxp7_305 { position: relative; } /* ================================================================ VARIABLE MENU ================================================================ */ ._variableMenu_pyxp7_321 { position: absolute; top: calc(100% + var(--space-1)); right: 0; z-index: var(--z-dropdown); width: 240px; overflow: hidden; border: 1px solid var(--border-light); border-radius: var(--radius-md); background: var(--color-white); box-shadow: var(--shadow-lg); } ._variableMenuTitle_pyxp7_347 { padding: var(--space-2) var(--space-3); border-bottom: 1px solid var(--border-light); color: var(--text-primary-dark); font-size: var(--font-size-xs); font-weight: var(--font-weight-semibold); } ._variableMenu_pyxp7_321 button { width: 100%; display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: var(--space-2); padding: var(--space-2) var(--space-3); border: none; background: transparent; text-align: left; cursor: pointer; } ._variableMenu_pyxp7_321 button:hover { background: var(--color-bg-light); } ._variableMenu_pyxp7_321 strong, ._variableMenu_pyxp7_321 span { min-width: 0; font-size: 10px; overflow-wrap: anywhere; } ._variableMenu_pyxp7_321 strong { color: var(--text-primary-dark); font-weight: var(--font-weight-medium); } ._variableMenu_pyxp7_321 span { color: var(--text-muted); } /* ================================================================ EDITOR ================================================================ */ ._editorGroup_pyxp7_103 { margin-top: var(--space-4); } ._editor_pyxp7_103 { width: 100%; overflow: visible; border: 1px solid var(--border-default); border-radius: var(--radius-md); background: var(--color-white); box-sizing: border-box; } ._toolbar_pyxp7_461 { width: 100%; min-height: 46px; display: flex; align-items: center; gap: 3px; padding: 5px var(--space-2); border-bottom: 1px solid var(--border-light); flex-wrap: wrap; box-sizing: border-box; } ._toolbarSecond_pyxp7_485 { min-height: 42px; } ._toolbar_pyxp7_461 button { min-width: 30px; height: 30px; flex-shrink: 0; display: inline-flex; align-items: center; justify-content: center; gap: 4px; padding: 0 7px; border: none; border-radius: var(--radius-sm); background: transparent; color: var(--text-primary-dark); font-family: inherit; font-size: var(--font-size-xs); cursor: pointer; transition: background var(--transition-fast), color var(--transition-fast); } ._toolbar_pyxp7_461 button:hover, ._colorControl_pyxp7_537:hover { background: var(--color-bg-light); color: var(--color-primary); } ._toolbar_pyxp7_461 button:active { background: color-mix(in srgb, var(--color-primary) 10%, var(--color-white)); } ._toolbar_pyxp7_461 button svg { width: 15px; height: 15px; } ._toolbarDivider_pyxp7_565 { width: 1px; height: 22px; flex-shrink: 0; margin: 0 3px; background: var(--border-light); } ._toolbarSelectInput_pyxp7_581, ._toolbarSizeInput_pyxp7_583 { height: 30px; flex-shrink: 0; padding: 0 25px 0 9px; border: none; border-left: 1px solid var(--border-light); background: var(--color-white); color: var(--text-primary-dark); font-family: inherit; font-size: var(--font-size-xs); outline: none; cursor: pointer; } ._toolbarSelectInput_pyxp7_581:hover, ._toolbarSizeInput_pyxp7_583:hover { background: var(--color-bg-light); } ._toolbarSelectInput_pyxp7_581 { min-width: 105px; } ._toolbarSizeInput_pyxp7_583 { min-width: 75px; } ._underlineButton_pyxp7_637 { font-weight: var(--font-weight-semibold); text-decoration: underline; } ._strikeButton_pyxp7_647 { font-weight: var(--font-weight-semibold); text-decoration: line-through; } /* ================================================================ COLOR CONTROLS ================================================================ */ ._colorControl_pyxp7_537 { position: relative; min-width: 44px; height: 30px; flex-shrink: 0; display: inline-flex; align-items: center; justify-content: center; gap: 3px; padding: 0 5px; border-radius: var(--radius-sm); color: var(--text-primary-dark); cursor: pointer; overflow: hidden; } ._colorControl_pyxp7_537 > svg:first-child { width: 15px; height: 15px; } ._colorControl_pyxp7_537 > svg:last-of-type { width: 11px; height: 11px; } ._colorControl_pyxp7_537 input { position: absolute; inset: 0; width: 100%; height: 100%; opacity: 0; cursor: pointer; } ._colorBar_pyxp7_735 { position: absolute; left: 6px; right: 17px; bottom: 3px; height: 2px; border-radius: var(--radius-full); } ._highlightGlyph_pyxp7_753 { font-size: 16px; line-height: 1; } ._tinyChevron_pyxp7_763 { width: 10px !important; height: 10px !important; } ._numberedListButton_pyxp7_773 { width: 31px; min-width: 31px !important; flex-direction: column; gap: 0 !important; padding: 2px 4px !important; font-size: 7px !important; line-height: 7px; } ._clearFormatButton_pyxp7_793 { font-size: 13px !important; font-family: serif !important; font-style: italic; } ._clearFormatButton_pyxp7_793 span { font-size: 9px; vertical-align: sub; } /* ================================================================ CONTENT EDITOR ================================================================ */ ._editorContent_pyxp7_823 { width: 100%; min-height: 330px; max-height: 500px; padding: var(--space-5); overflow-y: auto; color: var(--text-primary-dark); background: var(--color-white); font-family: var(--font-family-base); font-size: var(--font-size-sm); line-height: 1.65; outline: none; box-sizing: border-box; } ._editorContent_pyxp7_823:empty::before { content: "Start writing your email..."; color: var(--text-muted); pointer-events: none; } ._editorContent_pyxp7_823 p { margin: 0 0 var(--space-3); color: inherit; } ._editorContent_pyxp7_823 h1, ._editorContent_pyxp7_823 h2, ._editorContent_pyxp7_823 h3 { margin: 0 0 var(--space-3); color: inherit; } ._editorContent_pyxp7_823 blockquote { margin: var(--space-3) 0; padding: var(--space-2) var(--space-3); border-left: 3px solid var(--color-primary); background: var(--color-bg-light); color: var(--text-secondary); } ._editorContent_pyxp7_823 ul, ._editorContent_pyxp7_823 ol { margin: var(--space-2) 0 var(--space-3); padding-left: var(--space-6); } ._editorContent_pyxp7_823 img { max-width: 100%; height: auto; } ._editorContent_pyxp7_823 a { color: var(--color-primary); } ._editorContent_pyxp7_823 hr { border: none; border-top: 1px solid var(--border-default); margin: var(--space-4) 0; } ._editorContent_pyxp7_823 table { width: 100%; max-width: 100%; margin: var(--space-3) 0; border-collapse: collapse; table-layout: fixed; } ._editorContent_pyxp7_823 table td, ._editorContent_pyxp7_823 table th { padding: var(--space-2); border: 1px solid var(--border-default); overflow-wrap: anywhere; } ._editorContent_pyxp7_823 pre { max-width: 100%; overflow-x: auto; padding: var(--space-3); border: 1px solid var(--border-light); border-radius: var(--radius-md); background: var(--color-bg-light); color: var(--text-primary-dark); font-family: monospace; white-space: pre-wrap; } /* ================================================================ LINK TARGET SELECTION ================================================================ */ ._linkSelectedTarget_pyxp7_1009 { outline: 2px solid var(--color-primary) !important; outline-offset: 3px; border-radius: var(--radius-sm); } ._editorContent_pyxp7_823 img._linkSelectedTarget_pyxp7_1009 { cursor: pointer; } ._previewHtml_pyxp7_1029 a { cursor: pointer; } /* * Preview links must remain interactive whether the linked target is * normal text, an image, or a custom template button. */ ._previewHtml_pyxp7_1029 a[href] { pointer-events: auto; } ._previewHtml_pyxp7_1029 a[href] img, ._previewHtml_pyxp7_1029 a[href] [data-template-button="true"] { pointer-events: auto; } ._previewHtml_pyxp7_1029 a img { cursor: pointer; } ._previewHtml_pyxp7_1029 a [data-template-button="true"] { cursor: pointer; } /* ================================================================ ATTACHMENTS ================================================================ */ ._attachments_pyxp7_105 { margin-top: var(--space-4); } ._attachmentGrid_pyxp7_1095 { width: 100%; display: grid; grid-template-columns: minmax(0, 1.3fr) minmax(220px, 0.8fr); gap: var(--space-3); } ._dropzone_pyxp7_1109 { min-height: 62px; display: flex; align-items: center; gap: var(--space-3); padding: var(--space-3) var(--space-4); border: 1px dashed var(--border-default); border-radius: var(--radius-md); background: var(--color-white); color: var(--text-primary-dark); text-align: left; cursor: pointer; transition: border-color var(--transition-fast), background var(--transition-fast); } ._dropzone_pyxp7_1109:hover { border-color: var(--color-primary); background: var(--color-bg-light); } ._dropzone_pyxp7_1109 > svg { width: 20px; height: 20px; flex-shrink: 0; color: var(--text-secondary); } ._dropzone_pyxp7_1109 div { min-width: 0; display: flex; flex-direction: column; gap: 3px; } ._dropzone_pyxp7_1109 strong { color: var(--text-primary-dark); font-size: var(--font-size-xs); font-weight: var(--font-weight-semibold); } ._dropzone_pyxp7_1109 strong span { color: var(--color-primary); } ._dropzone_pyxp7_1109 small, ._fileMeta_pyxp7_1203 span { color: var(--text-muted); font-size: 10px; } ._fileCard_pyxp7_1213 { min-width: 0; display: flex; align-items: center; gap: var(--space-3); padding: var(--space-3); border: 1px solid var(--border-light); border-radius: var(--radius-md); background: var(--color-bg-light); } ._fileIcon_pyxp7_1235 { width: 32px; height: 36px; flex-shrink: 0; display: flex; align-items: center; justify-content: center; border-radius: var(--radius-sm); background: color-mix(in srgb, var(--color-danger) 10%, var(--color-white)); color: var(--color-danger); font-size: 9px; font-weight: var(--font-weight-bold); } ._fileMeta_pyxp7_1203 { min-width: 0; flex: 1; display: flex; flex-direction: column; gap: 2px; } ._fileMeta_pyxp7_1203 strong { overflow: hidden; color: var(--text-primary-dark); font-size: var(--font-size-xs); white-space: nowrap; text-overflow: ellipsis; } ._removeFile_pyxp7_1295 { width: 26px; height: 26px; flex-shrink: 0; display: flex; align-items: center; justify-content: center; padding: 0; border: none; border-radius: var(--radius-sm); background: transparent; color: var(--text-secondary); cursor: pointer; } ._removeFile_pyxp7_1295:hover { color: var(--color-danger); background: var(--color-white); } ._editorFooter_pyxp7_1335 { width: 100%; display: flex; align-items: center; justify-content: space-between; gap: var(--space-3); margin-top: var(--space-4); padding-top: var(--space-3); border-top: 1px solid var(--border-light); color: var(--text-muted); font-size: 10px; } ._autosave_pyxp7_1361 { display: flex; align-items: center; gap: 5px; } ._autosave_pyxp7_1361 svg { color: var(--color-success); } /* ================================================================ PREVIEW ================================================================ */ ._previewCard_pyxp7_1389 { display: flex; flex-direction: column; } ._previewHeader_pyxp7_1399 { display: flex; align-items: flex-start; justify-content: space-between; gap: var(--space-3); padding-bottom: var(--space-3); border-bottom: 1px solid var(--border-light); } ._previewHeader_pyxp7_1399 ._cardTitle_pyxp7_57 { margin: 0; } ._previewActions_pyxp7_1425 { display: flex; align-items: center; gap: var(--space-2); flex-wrap: wrap; justify-content: flex-end; } ._deviceToggle_pyxp7_1441 { display: flex; border: 1px solid var(--border-light); border-radius: var(--radius-md); overflow: hidden; } ._deviceToggle_pyxp7_1441 button { min-height: 34px; display: inline-flex; align-items: center; gap: 6px; padding: 0 var(--space-3); border: none; border-right: 1px solid var(--border-light); background: var(--color-white); color: var(--text-secondary); font-family: inherit; font-size: var(--font-size-xs); cursor: pointer; } ._deviceToggle_pyxp7_1441 button:last-child { border-right: none; } ._deviceToggle_pyxp7_1441 button:hover { background: var(--color-bg-light); } ._deviceToggle_pyxp7_1441 button._deviceActive_pyxp7_1501 { background: var(--brand-soft); color: var(--color-primary); } ._iconButton_pyxp7_1511 { width: 36px; height: 36px; flex-shrink: 0; display: inline-flex; align-items: center; justify-content: center; padding: 0; border: 1px solid var(--border-default); border-radius: var(--radius-md); background: var(--color-white); color: var(--text-primary-dark); cursor: pointer; } ._iconButton_pyxp7_1511:hover { border-color: var(--color-primary); background: var(--color-bg-light); color: var(--color-primary); } ._previewMeta_pyxp7_1553 { display: flex; flex-direction: column; gap: var(--space-2); padding: var(--space-4) 0; } ._previewMeta_pyxp7_1553 div { min-width: 0; display: flex; gap: var(--space-3); } ._previewMeta_pyxp7_1553 span { width: 52px; flex-shrink: 0; color: var(--text-secondary); font-size: var(--font-size-xs); } ._previewMeta_pyxp7_1553 strong { min-width: 0; color: var(--text-primary-dark); font-size: var(--font-size-xs); font-weight: var(--font-weight-semibold); overflow-wrap: anywhere; } ._previewStage_pyxp7_1609 { width: 100%; flex: 1; min-height: 570px; display: flex; align-items: flex-start; justify-content: center; padding: var(--space-6); border: 1px solid var(--border-light); border-radius: var(--radius-md); background: var(--color-bg-light); overflow: auto; box-sizing: border-box; } ._emailCanvas_pyxp7_1639 { width: 100%; max-width: 500px; min-height: 490px; padding: var(--space-8); border: 1px solid var(--border-light); border-radius: var(--radius-lg); background: var(--color-white); box-shadow: var(--shadow-md); transition: max-width var(--transition-base); box-sizing: border-box; } ._mobilePreview_pyxp7_1665 { max-width: 320px; } ._previewHtml_pyxp7_1029 { width: 100%; color: var(--text-primary-dark); font-family: var(--font-family-base); font-size: var(--font-size-sm); line-height: 1.65; overflow-wrap: anywhere; } ._previewHtml_pyxp7_1029 img { max-width: 100%; height: auto; } ._previewHtml_pyxp7_1029 p { margin: 0 0 var(--space-4); color: inherit; } ._previewHtml_pyxp7_1029 h1, ._previewHtml_pyxp7_1029 h2, ._previewHtml_pyxp7_1029 h3 { margin: 0 0 var(--space-4); color: inherit; } ._previewHtml_pyxp7_1029 a { color: var(--color-primary); } ._previewHtml_pyxp7_1029 ul, ._previewHtml_pyxp7_1029 ol { padding-left: var(--space-6); } ._previewHtml_pyxp7_1029 table { width: 100%; max-width: 100%; border-collapse: collapse; table-layout: fixed; } ._previewHtml_pyxp7_1029 table td, ._previewHtml_pyxp7_1029 table th { padding: var(--space-2); border: 1px solid var(--border-default); overflow-wrap: anywhere; } ._previewHtml_pyxp7_1029 pre { max-width: 100%; overflow-x: auto; padding: var(--space-3); border-radius: var(--radius-md); background: var(--color-bg-light); white-space: pre-wrap; } ._emailDivider_pyxp7_1789 { width: 100%; height: 1px; margin: var(--space-5) 0; background: var(--border-light); } ._emailFooter_pyxp7_1803 { text-align: center; } ._emailFooter_pyxp7_1803 p { margin: 0 0 var(--space-3); color: var(--text-muted); font-size: 10px; line-height: 1.5; } ._emailFooter_pyxp7_1803 button { padding: 0; border: none; background: transparent; color: var(--text-muted); font-family: inherit; font-size: 10px; text-decoration: underline; cursor: pointer; } ._emailFooter_pyxp7_1803 button:hover { color: var(--color-primary); } /* ================================================================ ADD BUTTON TOOL ================================================================ */ ._addButtonTool_pyxp7_1863 { color: var(--color-primary) !important; } ._editorContent_pyxp7_823 [data-template-button="true"] { position: relative; display: inline-block; cursor: grab; user-select: none; touch-action: none; border-radius: var(--radius-md); transition: box-shadow var(--transition-fast), opacity var(--transition-fast), transform var(--transition-fast); } ._editorContent_pyxp7_823 [data-template-button="true"]:hover { box-shadow: 0 0 0 2px color-mix(in srgb, var(--color-primary) 28%, transparent); } ._editorContent_pyxp7_823 [data-template-button="true"]:active { cursor: grabbing; } ._draggingTemplateButton_pyxp7_1915 { opacity: 0.55 !important; transform: scale(0.98); } ._previewHtml_pyxp7_1029 [data-template-button="true"] { cursor: default; user-select: text; } /* ================================================================ INSERT LINK MODAL ================================================================ */ ._linkModalOverlay_pyxp7_1943 { position: fixed; inset: 0; z-index: var(--z-modal); display: flex; align-items: center; justify-content: center; padding: var(--space-4); background: rgba(15, 23, 42, 0.45); backdrop-filter: blur(2px); } ._linkModal_pyxp7_1943 { width: 100%; max-width: 440px; overflow: hidden; border: 1px solid var(--border-light); border-radius: var(--radius-lg); background: var(--color-white); box-shadow: var(--shadow-xl); animation: _linkModalIn_pyxp7_1 160ms ease; } @keyframes _linkModalIn_pyxp7_1 { from { opacity: 0; transform: translateY(8px) scale(0.98); } to { opacity: 1; transform: translateY(0) scale(1); } } ._linkModalHeader_pyxp7_2013 { display: flex; align-items: flex-start; justify-content: space-between; gap: var(--space-4); padding: var(--space-4) var(--space-5); border-bottom: 1px solid var(--border-light); } ._linkModalHeader_pyxp7_2013 h2 { margin: 0 0 var(--space-1); color: var(--text-primary-dark); font-size: var(--font-size-xl); font-weight: var(--font-weight-bold); } ._linkModalHeader_pyxp7_2013 p { margin: 0; color: var(--text-secondary); font-size: var(--font-size-xs); line-height: 1.5; } ._linkModalClose_pyxp7_2059 { width: 32px; height: 32px; flex-shrink: 0; display: inline-flex; align-items: center; justify-content: center; padding: 0; border: none; border-radius: var(--radius-md); background: transparent; color: var(--text-secondary); cursor: pointer; transition: background var(--transition-fast), color var(--transition-fast); } ._linkModalClose_pyxp7_2059:hover { background: var(--color-bg-light); color: var(--color-danger); } ._linkModalClose_pyxp7_2059 svg { width: 18px; height: 18px; } ._linkModalBody_pyxp7_2115 { padding: var(--space-5); } ._linkModalField_pyxp7_2123 { min-width: 0; } ._linkModalField_pyxp7_2123 > label { display: block; margin-bottom: var(--space-2); color: var(--text-primary-dark); font-size: var(--font-size-xs); font-weight: var(--font-weight-medium); } ._linkModalField_pyxp7_2123 > label span { margin-left: 2px; color: var(--color-danger); } ._linkModalField_pyxp7_2123 .app-input { width: 100%; height: 40px; } ._linkModalFooter_pyxp7_2167 { display: flex; align-items: center; justify-content: flex-end; gap: var(--space-2); padding: var(--space-4) var(--space-5); border-top: 1px solid var(--border-light); } /* ================================================================ ADD BUTTON MODAL ================================================================ */ ._buttonModalOverlay_pyxp7_2193 { position: fixed; inset: 0; z-index: var(--z-modal); display: flex; align-items: center; justify-content: center; padding: var(--space-4); background: rgba(15, 23, 42, 0.45); backdrop-filter: blur(2px); } ._buttonModal_pyxp7_2193 { width: 100%; max-width: 460px; overflow: hidden; border: 1px solid var(--border-light); border-radius: var(--radius-lg); background: var(--color-white); box-shadow: var(--shadow-xl); animation: _buttonModalIn_pyxp7_1 160ms ease; } @keyframes _buttonModalIn_pyxp7_1 { from { opacity: 0; transform: translateY(8px) scale(0.98); } to { opacity: 1; transform: translateY(0) scale(1); } } ._buttonModalHeader_pyxp7_2263 { display: flex; align-items: flex-start; justify-content: space-between; gap: var(--space-4); padding: var(--space-4) var(--space-5); border-bottom: 1px solid var(--border-light); } ._buttonModalHeader_pyxp7_2263 h2 { margin: 0 0 var(--space-1); color: var(--text-primary-dark); font-size: var(--font-size-xl); font-weight: var(--font-weight-bold); } ._buttonModalHeader_pyxp7_2263 p { margin: 0; color: var(--text-secondary); font-size: var(--font-size-xs); line-height: 1.5; } ._buttonModalClose_pyxp7_2309 { width: 32px; height: 32px; flex-shrink: 0; display: inline-flex; align-items: center; justify-content: center; padding: 0; border: none; border-radius: var(--radius-md); background: transparent; color: var(--text-secondary); cursor: pointer; transition: background var(--transition-fast), color var(--transition-fast); } ._buttonModalClose_pyxp7_2309:hover { background: var(--color-bg-light); color: var(--color-danger); } ._buttonModalClose_pyxp7_2309 svg { width: 18px; height: 18px; } ._buttonModalBody_pyxp7_2365 { display: flex; flex-direction: column; gap: var(--space-4); padding: var(--space-5); } ._buttonModalField_pyxp7_2379 { min-width: 0; } ._buttonModalField_pyxp7_2379 > label { display: block; margin-bottom: var(--space-2); color: var(--text-primary-dark); font-size: var(--font-size-xs); font-weight: var(--font-weight-medium); } ._buttonColorGrid_pyxp7_2403 { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: var(--space-3); } ._buttonColorField_pyxp7_2415 { min-height: 40px; display: flex; align-items: center; gap: var(--space-2); padding: var(--space-1) var(--space-2); border: 1px solid var(--border-default); border-radius: var(--radius-md); background: var(--color-white); } ._buttonColorField_pyxp7_2415:focus-within { border-color: var(--color-primary); } ._buttonColorField_pyxp7_2415 input[type="color"] { width: 30px; height: 30px; flex-shrink: 0; padding: 0; border: none; border-radius: var(--radius-sm); background: transparent; cursor: pointer; } ._buttonColorField_pyxp7_2415 input[type="color"]::-webkit-color-swatch-wrapper { padding: 0; } ._buttonColorField_pyxp7_2415 input[type="color"]::-webkit-color-swatch { border: 1px solid var(--border-light); border-radius: var(--radius-sm); } ._buttonColorField_pyxp7_2415 span { min-width: 0; color: var(--text-secondary); font-size: var(--font-size-xs); text-transform: uppercase; } ._buttonSizeGrid_pyxp7_2499 { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: var(--space-3); } ._buttonSizeInput_pyxp7_2511 { position: relative; width: 100%; } ._buttonSizeInput_pyxp7_2511 .app-input { width: 100%; padding-right: 38px; } ._buttonSizeInput_pyxp7_2511 > span { position: absolute; top: 50%; right: var(--space-3); transform: translateY(-50%); color: var(--text-muted); font-size: var(--font-size-xs); pointer-events: none; } ._buttonPreviewBox_pyxp7_2551 { padding: var(--space-3); border: 1px solid var(--border-light); border-radius: var(--radius-md); background: var(--color-bg-light); } ._buttonPreviewBox_pyxp7_2551 > span { display: block; margin-bottom: var(--space-3); color: var(--text-secondary); font-size: var(--font-size-xs); font-weight: var(--font-weight-medium); } ._buttonPreviewBox_pyxp7_2551 > div { min-height: 90px; display: flex; align-items: center; justify-content: center; overflow-x: auto; padding: var(--space-2); border-radius: var(--radius-md); background: var(--color-white); } ._buttonPreview_pyxp7_2551 { display: inline-flex; align-items: center; justify-content: center; flex-shrink: 0; max-width: none; padding: 0 16px; box-sizing: border-box; border-radius: var(--radius-md); font-size: var(--font-size-sm); font-weight: var(--font-weight-semibold); line-height: 1.2; overflow-wrap: anywhere; } ._dragHelp_pyxp7_2633 { display: flex; align-items: flex-start; gap: var(--space-2); padding: var(--space-3); border: 1px solid color-mix(in srgb, var(--color-primary) 18%, var(--border-light)); border-radius: var(--radius-md); background: color-mix(in srgb, var(--color-primary) 6%, var(--color-white)); color: var(--text-secondary); font-size: var(--font-size-xs); line-height: 1.5; } ._dragHelp_pyxp7_2633 svg { width: 16px; height: 16px; flex-shrink: 0; margin-top: 1px; color: var(--color-primary); } ._buttonModalFooter_pyxp7_2677 { display: flex; align-items: center; justify-content: flex-end; gap: var(--space-2); padding: var(--space-4) var(--space-5); border-top: 1px solid var(--border-light); background: var(--color-white); } /* ================================================================ RESPONSIVE ================================================================ */ @media (max-width: 1200px) { ._pageGrid_pyxp7_17 { grid-template-columns: 1fr; } ._previewCard_pyxp7_1389 ._previewStage_pyxp7_1609, ._previewStage_pyxp7_1609 { min-height: auto; } } @media (max-width: 900px) { ._detailsGrid_pyxp7_79 { grid-template-columns: 1fr; } ._subjectGroup_pyxp7_283 { grid-column: auto; } ._attachmentGrid_pyxp7_1095 { grid-template-columns: 1fr; } ._previewHeader_pyxp7_1399 { flex-direction: column; align-items: stretch; } ._previewActions_pyxp7_1425 { justify-content: flex-start; } } @media (max-width: 768px) { ._headerActions_pyxp7_9 { grid-template-columns: repeat(2, minmax(0, 1fr)) !important; } ._headerActions_pyxp7_9 .app-btn:last-child { grid-column: 1 / -1; } ._previewStage_pyxp7_1609 { padding: var(--space-3); } ._emailCanvas_pyxp7_1639 { padding: var(--space-5); } } @media (max-width: 560px) { ._card_pyxp7_35 { padding: var(--space-3); } ._subjectField_pyxp7_291 { grid-template-columns: 1fr; } ._subjectField_pyxp7_291 .app-btn { width: 100%; } ._toolbar_pyxp7_461 { overflow-x: auto; overflow-y: hidden; flex-wrap: nowrap; -webkit-overflow-scrolling: touch; } ._toolbar_pyxp7_461 button, ._toolbarSelectInput_pyxp7_581, ._toolbarSizeInput_pyxp7_583, ._toolbarDivider_pyxp7_565, ._variableButtonWrapper_pyxp7_305, ._colorControl_pyxp7_537 { flex-shrink: 0; } ._editorContent_pyxp7_823 { min-height: 280px; max-height: 400px; padding: var(--space-3); } ._variableMenu_pyxp7_321 { right: auto; left: 0; width: 220px; max-width: calc(100vw - 48px); } ._previewActions_pyxp7_1425 { width: 100%; display: grid; grid-template-columns: 1fr auto; gap: var(--space-2); } ._deviceToggle_pyxp7_1441 { width: 100%; grid-column: 1 / -1; } ._deviceToggle_pyxp7_1441 button { flex: 1; justify-content: center; } ._previewActions_pyxp7_1425 .app-btn { width: 100%; } ._previewStage_pyxp7_1609 { padding: var(--space-2); } ._emailCanvas_pyxp7_1639, ._mobilePreview_pyxp7_1665 { max-width: 100%; } ._emailCanvas_pyxp7_1639 { min-height: 420px; padding: var(--space-4); } ._editorFooter_pyxp7_1335 { align-items: flex-start; flex-direction: column; } } @media (max-width: 420px) { ._toolbar_pyxp7_461 { padding: 4px var(--space-1); } ._toolbar_pyxp7_461 button { min-width: 28px; padding: 0 6px; } ._previewMeta_pyxp7_1553 div { flex-direction: column; gap: 3px; } ._previewMeta_pyxp7_1553 span { width: auto; } ._emailCanvas_pyxp7_1639 { padding: var(--space-3); } } /* ================================================================ INSERT LINK MODAL - MOBILE ================================================================ */ @media (max-width: 560px) { ._linkModalOverlay_pyxp7_1943 { align-items: flex-start; padding: var(--space-3); overflow-y: auto; } ._linkModal_pyxp7_1943 { max-width: 100%; } ._linkModalHeader_pyxp7_2013, ._linkModalBody_pyxp7_2115, ._linkModalFooter_pyxp7_2167 { padding-left: var(--space-4); padding-right: var(--space-4); } ._linkModalFooter_pyxp7_2167 { flex-direction: column-reverse; } ._linkModalFooter_pyxp7_2167 .app-btn { width: 100%; } } /* ================================================================ ADD BUTTON MODAL - MOBILE ================================================================ */ @media (max-width: 560px) { ._buttonModalOverlay_pyxp7_2193 { align-items: flex-start; padding: var(--space-3); overflow-y: auto; } ._buttonModal_pyxp7_2193 { max-width: 100%; } ._buttonModalHeader_pyxp7_2263, ._buttonModalBody_pyxp7_2365, ._buttonModalFooter_pyxp7_2677 { padding-left: var(--space-4); padding-right: var(--space-4); } ._buttonColorGrid_pyxp7_2403, ._buttonSizeGrid_pyxp7_2499 { grid-template-columns: 1fr; } ._buttonPreviewBox_pyxp7_2551 > div { justify-content: flex-start; } ._buttonModalFooter_pyxp7_2677 { flex-direction: column-reverse; } ._buttonModalFooter_pyxp7_2677 .app-btn { width: 100%; } } /* ═══════════════════════════════════════════════════════════════ SENDERS & DOMAINS ═══════════════════════════════════════════════════════════════ */ ._page_c3uej_9 { width: 100%; min-width: 0; display: flex; flex-direction: column; gap: var(--space-4); padding-top: var(--space-4); box-sizing: border-box; } /* ================================================================ HEADER ================================================================ */ ._pageHeader_c3uej_45 { display: flex; align-items: flex-start; justify-content: space-between; gap: var(--space-4); } ._pageTitle_c3uej_63 { margin: 0 0 var(--space-1); font-size: var(--font-size-2xl); font-weight: var(--font-weight-bold); color: var(--text-primary-dark); } ._pageDescription_c3uej_83 { margin: 0; font-size: var(--font-size-sm); color: var(--text-secondary); } /* ================================================================ TABS ================================================================ */ ._tabs_c3uej_107 { display: flex; align-items: center; gap: var(--space-4); border-bottom: 1px solid var(--border-light); } ._tabButton_c3uej_125 { position: relative; min-width: 80px; padding: var(--space-3) var(--space-2); border: none; background: transparent; color: var(--text-secondary); font-family: inherit; font-size: var(--font-size-sm); font-weight: var(--font-weight-medium); cursor: pointer; transition: color var(--transition-fast), background var(--transition-fast); } ._tabButton_c3uej_125:hover { color: var(--color-primary); } ._tabButton_c3uej_125::after { content: ""; position: absolute; left: 0; right: 0; bottom: -1px; height: 2px; background: transparent; } ._activeTab_c3uej_213 { color: var(--color-primary); font-weight: var(--font-weight-semibold); } ._activeTab_c3uej_213::after { background: var(--color-primary); } /* ================================================================ TAB CONTENT ================================================================ */ ._tabContent_c3uej_241 { width: 100%; display: flex; flex-direction: column; gap: var(--space-4); } /* ================================================================ MODAL OVERLAY ================================================================ */ ._modalOverlay_c3uej_267 { position: fixed; inset: 0; z-index: var(--z-modal); display: flex; align-items: center; justify-content: center; padding: var(--space-4); background: rgba(15, 23, 42, 0.46); backdrop-filter: blur(2px); } /* ================================================================ MODAL ================================================================ */ ._modal_c3uej_267 { width: 100%; max-width: 455px; overflow: hidden; border: 1px solid var(--border-light); border-radius: var(--radius-lg); background: var(--color-white); box-shadow: var(--shadow-xl); animation: _modalIn_c3uej_1 160ms ease; } /* ================================================================ DOMAIN INPUT ================================================================ */ ._domainInput_c3uej_355 { position: relative; width: 100%; display: flex; align-items: center; } ._domainInput_c3uej_355 > svg { position: absolute; left: var(--space-3); width: 15px; height: 15px; color: var(--text-muted); pointer-events: none; z-index: 1; } ._domainInput_c3uej_355 .app-input { padding-left: 36px; } @keyframes _modalIn_c3uej_1 { from { opacity: 0; transform: translateY(8px) scale(0.98); } to { opacity: 1; transform: translateY(0) scale(1); } } /* ================================================================ MODAL HEADER ================================================================ */ ._modalHeader_c3uej_447 { display: flex; align-items: flex-start; justify-content: space-between; gap: var(--space-4); padding: var(--space-5) var(--space-5) var(--space-3); } ._modalTitle_c3uej_469 { margin: 0 0 var(--space-2); font-size: var(--font-size-xl); font-weight: var(--font-weight-bold); color: var(--text-primary-dark); } ._modalDescription_c3uej_489 { margin: 0; font-size: var(--font-size-xs); line-height: 1.5; color: var(--text-secondary); } ._closeButton_c3uej_509 { width: 30px; height: 30px; flex-shrink: 0; display: flex; align-items: center; justify-content: center; padding: 0; border: none; border-radius: var(--radius-md); background: transparent; color: var(--text-secondary); cursor: pointer; transition: background var(--transition-fast), color var(--transition-fast); } ._closeButton_c3uej_509:hover { background: var(--color-bg-light); color: var(--text-primary-dark); } ._closeButton_c3uej_509 svg { width: 19px; height: 19px; } /* ================================================================ MODAL BODY ================================================================ */ ._modalBody_c3uej_595 { display: flex; flex-direction: column; gap: var(--space-5); padding: var(--space-3) var(--space-5) var(--space-5); } ._formGroup_c3uej_613 { min-width: 0; } ._formGroup_c3uej_613 label { display: block; margin-bottom: var(--space-1); color: var(--text-primary-dark); font-size: var(--font-size-sm); font-weight: var(--font-weight-semibold); } ._formGroup_c3uej_613 label span { color: var(--color-danger); } ._formGroup_c3uej_613 p { margin: 0 0 var(--space-2); color: var(--text-secondary); font-size: var(--font-size-xs); } /* ================================================================ SUB DOMAIN FIELD ================================================================ */ ._subDomainField_c3uej_677 { width: 100%; min-width: 0; display: grid; grid-template-columns: minmax(120px, 0.8fr) minmax(0, 1.2fr); align-items: stretch; border: 1px solid var(--border-default); border-radius: var(--radius-md); background: var(--color-white); overflow: hidden; transition: border-color var(--transition-fast), box-shadow var(--transition-fast); } ._subDomainField_c3uej_677:focus-within { border-color: var(--color-primary); box-shadow: 0 0 0 3px color-mix(in srgb, var(--color-primary) 10%, transparent); } /* LEFT INPUT */ ._subDomainField_c3uej_677 .app-input { width: 100%; height: 44px; min-width: 0; padding: 0 var(--space-3); border: none !important; border-radius: 0 !important; background: var(--color-white); box-shadow: none !important; outline: none !important; } /* RIGHT DOMAIN */ ._subDomainSuffix_c3uej_787 { width: 100%; min-width: 0; height: 44px; display: flex; align-items: center; padding: 0 var(--space-3); border-left: 1px solid var(--border-light); background: var(--color-bg-light); color: var(--text-secondary); font-size: var(--font-size-sm); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; box-sizing: border-box; } /* FULL SUB DOMAIN PREVIEW */ ._subDomainPreview_c3uej_847 { display: block; margin-top: var(--space-1); color: var(--text-muted); font-size: 10px; line-height: 1.4; overflow-wrap: anywhere; } /* ================================================================ INFO ================================================================ */ ._infoMessage_c3uej_883 { min-height: 48px; display: flex; align-items: center; gap: var(--space-2); padding: var(--space-3); border: 1px solid var(--border-light); border-radius: var(--radius-md); background: var(--color-bg-light); color: var(--text-secondary); font-size: var(--font-size-xs); } ._infoMessage_c3uej_883 svg { width: 20px; height: 20px; flex-shrink: 0; color: var(--color-primary); } /* ================================================================ MODAL FOOTER ================================================================ */ ._modalFooter_c3uej_951 { display: flex; align-items: center; justify-content: space-between; gap: var(--space-3); padding: var(--space-4) var(--space-5); border-top: 1px solid var(--border-light); } /* ================================================================ DOMAIN / DEFAULT SELECT ================================================================ */ ._selectInput_c3uej_985 { width: 100%; height: 42px; padding: 0 36px 0 var(--space-3); border: 1px solid var(--border-default); border-radius: var(--radius-md); background-color: var(--color-white); color: var(--text-primary-dark); font-family: inherit; font-size: var(--font-size-sm); outline: none; cursor: pointer; box-sizing: border-box; transition: border-color var(--transition-fast), box-shadow var(--transition-fast); } ._selectInput_c3uej_985:hover:not(:disabled) { border-color: var(--border-dark); } ._selectInput_c3uej_985:focus { border-color: var(--color-primary); box-shadow: 0 0 0 3px color-mix(in srgb, var(--color-primary) 10%, transparent); } ._selectInput_c3uej_985:disabled { cursor: not-allowed; opacity: 0.65; background: var(--color-bg-light); color: var(--text-muted); } /* ================================================================ VALIDATION ================================================================ */ ._errorText_c3uej_1093 { display: block; margin-top: 5px; color: var(--color-danger); font-size: 11px; line-height: 1.3; } ._inputError_c3uej_1117 { border-color: var(--color-danger) !important; } ._inputError_c3uej_1117:focus { border-color: var(--color-danger) !important; box-shadow: 0 0 0 3px color-mix(in srgb, var(--color-danger) 10%, transparent) !important; } /* ================================================================ FROM EMAIL + SELECTED DOMAIN ================================================================ */ ._emailField_c3uej_1145 { width: 100%; min-width: 0; display: grid; grid-template-columns: minmax(0, 1fr) auto; align-items: stretch; overflow: hidden; border: 1px solid var(--border-default); border-radius: var(--radius-md); background: var(--color-white); transition: border-color var(--transition-fast), box-shadow var(--transition-fast); } ._emailField_c3uej_1145:focus-within { border-color: var(--color-primary); box-shadow: 0 0 0 3px color-mix(in srgb, var(--color-primary) 10%, transparent); } ._emailFieldError_c3uej_1203 { border-color: var(--color-danger) !important; } ._emailFieldError_c3uej_1203:focus-within { border-color: var(--color-danger) !important; box-shadow: 0 0 0 3px color-mix(in srgb, var(--color-danger) 10%, transparent) !important; } ._emailLocalInput_c3uej_1223 { width: 100%; min-width: 0; height: 44px; padding: 0 var(--space-3); border: none; outline: none; background: var(--color-white); color: var(--text-primary-dark); font-family: inherit; font-size: var(--font-size-sm); box-sizing: border-box; } ._emailLocalInput_c3uej_1223::placeholder { color: var(--text-muted); } ._emailLocalInput_c3uej_1223:disabled { cursor: not-allowed; opacity: 0.7; } ._emailDomainSuffix_c3uej_1281 { min-width: 110px; max-width: 190px; height: 44px; display: flex; align-items: center; padding: 0 var(--space-3); border-left: 1px solid var(--border-light); background: var(--color-bg-light); color: var(--text-secondary); font-size: var(--font-size-sm); font-weight: var(--font-weight-medium); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; box-sizing: border-box; } ._emailPreview_c3uej_1333 { display: block; margin-top: var(--space-1); color: var(--text-muted); font-size: 10px; line-height: 1.4; overflow-wrap: anywhere; } /* ================================================================ SET AS DEFAULT TOGGLE ================================================================ */ ._defaultToggleRow_c3uej_1369 { width: 100%; min-height: 54px; display: flex; align-items: center; justify-content: space-between; gap: var(--space-3); padding: 0 var(--space-4); border: 1px solid var(--border-light); border-radius: var(--radius-md); background: var(--color-bg-light); box-sizing: border-box; } ._defaultToggleLabel_c3uej_1409 { margin: 0 !important; color: var(--text-primary-dark) !important; font-size: var(--font-size-sm) !important; font-weight: var(--font-weight-semibold) !important; cursor: pointer; } ._toggleSwitch_c3uej_1431 { position: relative; width: 48px; height: 26px; flex-shrink: 0; padding: 0; border: none; border-radius: 999px; background: #cbd5e1; cursor: pointer; transition: background var(--transition-fast), box-shadow var(--transition-fast); outline: none; } ._toggleSwitch_c3uej_1431:hover:not(:disabled) { background: #b8c3d1; } ._toggleSwitch_c3uej_1431:focus-visible { box-shadow: 0 0 0 3px color-mix(in srgb, var(--color-primary) 16%, transparent); } ._toggleSwitchActive_c3uej_1497 { background: var(--color-primary); } ._toggleSwitchActive_c3uej_1497:hover:not(:disabled) { background: var(--color-primary); } ._toggleSwitch_c3uej_1431:disabled { cursor: not-allowed; opacity: 0.6; } ._toggleKnob_c3uej_1523 { position: absolute; top: 3px; left: 3px; width: 20px; height: 20px; border-radius: 50%; background: var(--color-white); box-shadow: 0 1px 3px rgba(15, 23, 42, 0.25); transition: transform var(--transition-fast); } ._toggleSwitchActive_c3uej_1497 ._toggleKnob_c3uej_1523 { transform: translateX(22px); } /* ================================================================ RESPONSIVE ================================================================ */ @media (max-width: 700px) { ._pageHeader_c3uej_45 { flex-direction: column; } ._modalOverlay_c3uej_267 { padding: var(--space-3); } ._modalHeader_c3uej_447, ._modalBody_c3uej_595, ._modalFooter_c3uej_951 { padding-left: var(--space-4); padding-right: var(--space-4); } ._modalFooter_c3uej_951 .app-btn { flex: 1; } ._actionGroup_c3uej_1617 { gap: 5px; } ._actionIconBox_c3uej_1625 { width: 26px; height: 26px; } /* SUB DOMAIN */ ._subDomainField_c3uej_677 { grid-template-columns: minmax(90px, 0.75fr) minmax(0, 1.25fr); } ._subDomainSuffix_c3uej_787 { padding: 0 var(--space-2); font-size: var(--font-size-xs); } ._emailDomainSuffix_c3uej_1281 { min-width: 95px; max-width: 150px; padding: 0 var(--space-2); font-size: var(--font-size-xs); } } @media (max-width: 420px) { ._subDomainField_c3uej_677 { grid-template-columns: minmax(80px, 0.7fr) minmax(0, 1.3fr); } ._subDomainField_c3uej_677 .app-input { padding: 0 var(--space-2); font-size: var(--font-size-xs); } ._subDomainSuffix_c3uej_787 { font-size: 11px; } ._selectInput_c3uej_985 { font-size: var(--font-size-xs); } ._emailField_c3uej_1145 { grid-template-columns: minmax(0, 1fr) minmax(105px, auto); } ._emailLocalInput_c3uej_1223 { padding: 0 var(--space-2); font-size: var(--font-size-xs); } ._emailDomainSuffix_c3uej_1281 { min-width: 105px; max-width: 130px; padding: 0 var(--space-2); font-size: 11px; } } /* ============================================================ HORIZONTAL ADD / EDIT SENDER MODAL ============================================================ */ ._modal_c3uej_267 { width: min(900px, calc(100vw - 40px)); max-width: 900px; max-height: calc(100vh - 40px); background: #ffffff; border-radius: 14px; box-shadow: 0 20px 60px rgba(15, 23, 42, 0.18); overflow: hidden; } /* ============================================================ HEADER ============================================================ */ ._modalHeader_c3uej_447 { display: flex; align-items: flex-start; justify-content: space-between; gap: 20px; padding: 20px 24px; border-bottom: 1px solid #e8ecf2; } ._modalHeaderContent_c3uej_1819 { min-width: 0; } ._modalTitle_c3uej_469 { margin: 0; font-size: 18px; font-weight: 700; color: #172033; } ._modalDescription_c3uej_489 { margin: 5px 0 0; font-size: 12px; line-height: 1.5; color: #6b7280; } ._closeButton_c3uej_509 { width: 30px; height: 30px; flex-shrink: 0; display: flex; align-items: center; justify-content: center; border: 0; border-radius: 7px; background: #f5f7fa; color: #667085; cursor: pointer; transition: 0.15s ease; } ._closeButton_c3uej_509:hover { background: #eef1f5; color: #172033; } /* ============================================================ BODY ============================================================ */ ._modalBody_c3uej_595 { padding: 22px 24px; max-height: calc(100vh - 190px); overflow-y: auto; } /* ============================================================ HORIZONTAL FORM ============================================================ */ ._formGrid_c3uej_1923 { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); column-gap: 20px; row-gap: 20px; } ._formGroup_c3uej_613 { min-width: 0; } ._formGroup_c3uej_613 label { display: flex; align-items: center; gap: 3px; margin-bottom: 6px; font-size: 12px; line-height: 1.3; font-weight: 600; color: #344054; } ._formGroup_c3uej_613 label span { color: #dc2626; } ._formGroup_c3uej_613 p { margin: 0 0 7px; font-size: 11px; line-height: 1.45; color: #8a94a6; } /* ============================================================ SELECT ============================================================ */ ._selectInput_c3uej_985 { width: 100%; height: 38px; padding: 0 11px; border: 1px solid #d9dee7; border-radius: 7px; background: #ffffff; color: #172033; font-size: 12px; outline: none; box-sizing: border-box; transition: border-color 0.15s ease, box-shadow 0.15s ease; } ._selectInput_c3uej_985:focus { border-color: #7c5cff; box-shadow: 0 0 0 3px rgba(124, 92, 255, 0.08); } ._selectInput_c3uej_985:disabled { background: #f5f6f8; cursor: not-allowed; } /* ============================================================ EMAIL FIELD ============================================================ */ ._emailField_c3uej_1145 { display: flex; align-items: center; width: 100%; height: 38px; border: 1px solid #d9dee7; border-radius: 7px; background: #ffffff; overflow: hidden; box-sizing: border-box; transition: border-color 0.15s ease, box-shadow 0.15s ease; } ._emailField_c3uej_1145:focus-within { border-color: #7c5cff; box-shadow: 0 0 0 3px rgba(124, 92, 255, 0.08); } ._emailFieldError_c3uej_1203 { border-color: #dc2626; } ._emailLocalInput_c3uej_1223 { flex: 1; min-width: 0; height: 100%; padding: 0 10px; border: 0; outline: none; background: transparent; color: #172033; font-size: 12px; } ._emailLocalInput_c3uej_1223::placeholder { color: #a1a8b5; } ._emailDomainSuffix_c3uej_1281 { flex-shrink: 0; max-width: 48%; padding: 0 10px; border-left: 1px solid #e3e7ed; color: #667085; font-size: 11px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; } /* ============================================================ NORMAL INPUT ERROR ============================================================ */ ._inputError_c3uej_1117 { border-color: #dc2626 !important; } ._errorText_c3uej_1093 { display: block; margin-top: 5px; color: #dc2626; font-size: 10px; line-height: 1.4; } /* ============================================================ EMAIL PREVIEW ============================================================ */ ._emailPreview_c3uej_1333 { display: block; margin-top: 5px; color: #667085; font-size: 10px; line-height: 1.3; } /* ============================================================ DEFAULT SECTION ============================================================ */ ._defaultSection_c3uej_2225 { margin-top: 22px; padding: 13px 15px; border: 1px solid #e6e9ef; border-radius: 9px; background: #fafbfc; } ._defaultToggleRow_c3uej_1369 { display: flex; align-items: center; justify-content: space-between; gap: 20px; } ._defaultToggleLabel_c3uej_1409 { margin: 0 !important; font-size: 12px !important; font-weight: 600 !important; color: #344054 !important; } ._defaultDescription_c3uej_2269 { margin: 3px 0 0 !important; font-size: 10px !important; color: #8a94a6 !important; } /* ============================================================ TOGGLE ============================================================ */ ._toggleSwitch_c3uej_1431 { position: relative; width: 38px; height: 21px; flex-shrink: 0; padding: 0; border: 0; border-radius: 999px; background: #d5d9e0; cursor: pointer; transition: background 0.18s ease; } ._toggleSwitchActive_c3uej_1497 { background: #7c5cff; } ._toggleKnob_c3uej_1523 { position: absolute; top: 3px; left: 3px; width: 15px; height: 15px; border-radius: 50%; background: #ffffff; box-shadow: 0 1px 3px rgba(0, 0, 0, 0.18); transition: transform 0.18s ease; } ._toggleSwitchActive_c3uej_1497 ._toggleKnob_c3uej_1523 { transform: translateX(17px); } /* ============================================================ INFO MESSAGE ============================================================ */ ._infoMessage_c3uej_883 { display: flex; align-items: flex-start; gap: 8px; margin-top: 16px; padding: 10px 12px; border: 1px solid #e4e8f0; border-radius: 7px; background: #f8fafc; color: #667085; font-size: 10px; line-height: 1.45; } ._infoMessage_c3uej_883 svg { flex-shrink: 0; margin-top: 1px; } /* ============================================================ SUBMIT ERROR ============================================================ */ ._submitError_c3uej_2409 { margin-top: 12px; padding: 9px 11px; border: 1px solid #fecaca; border-radius: 7px; background: #fef2f2; color: #dc2626; font-size: 11px; } /* ============================================================ FOOTER ============================================================ */ ._modalFooter_c3uej_951 { display: flex; align-items: center; justify-content: flex-end; gap: 8px; padding: 14px 24px; border-top: 1px solid #e8ecf2; background: #ffffff; } /* ============================================================ RESPONSIVE ============================================================ */ @media (max-width: 700px) { ._modal_c3uej_267 { width: calc(100vw - 24px); max-height: calc(100vh - 24px); border-radius: 12px; } ._modalHeader_c3uej_447 { padding: 16px 18px; } ._modalBody_c3uej_595 { padding: 18px; } ._formGrid_c3uej_1923 { grid-template-columns: 1fr; row-gap: 17px; } ._modalFooter_c3uej_951 { padding: 12px 18px; } } /* ================================================================ PROFILE WRAPPER ================================================================ */ ._wrap_75g5s_9 { width: 100%; min-width: 0; display: flex; flex-direction: column; gap: var(--space-4); padding-top: var(--space-4); box-sizing: border-box; } /* ================================================================ HEADER ================================================================ */ ._header_75g5s_45 { width: 100%; display: flex; align-items: flex-start; justify-content: space-between; gap: var(--space-4); } ._title_75g5s_65 { margin: 0 0 var(--space-1); font-size: var(--font-size-2xl); font-weight: var(--font-weight-bold); color: var(--text-primary-dark); } ._subtitle_75g5s_83 { margin: 0; font-size: var(--font-size-xs); color: var(--text-secondary); } ._headerActions_75g5s_99 { display: flex; align-items: center; gap: var(--space-2); flex-shrink: 0; } /* ================================================================ BUTTONS ================================================================ */ ._btn_75g5s_125 { display: inline-flex; align-items: center; justify-content: center; gap: var(--space-2); padding: 8px 16px; font-size: var(--font-size-sm); font-weight: var(--font-weight-medium); border: 1px solid transparent; border-radius: var(--radius-md); cursor: pointer; transition: all var(--transition-fast); text-decoration: none; white-space: nowrap; min-height: 34px; } ._btnPrimary_75g5s_179 { background: var(--color-primary); color: var(--color-white); border-color: var(--color-primary); } ._btnPrimary_75g5s_179:hover:not(:disabled) { background: var(--color-primary-dark); border-color: var(--color-primary-dark); } ._btnPrimary_75g5s_179:disabled { opacity: 0.6; cursor: not-allowed; } ._btnSecondary_75g5s_211 { background: var(--color-white); color: var(--text-primary-dark); border-color: var(--border-default); } ._btnSecondary_75g5s_211:hover { background: var(--color-bg-light); border-color: var(--border-dark); } /* ================================================================ FORM CARD ================================================================ */ ._formCard_75g5s_241 { width: 100%; padding: var(--space-4); background: var(--color-white); border: 1px solid var(--border-light); border-radius: var(--radius-lg); box-shadow: var(--shadow-sm); box-sizing: border-box; } /* ================================================================ SECTION HEADING ================================================================ */ ._sectionHeading_75g5s_281 { margin: 0 0 var(--space-3); font-size: var(--font-size-base); font-weight: var(--font-weight-semibold); color: var(--text-primary-dark); } /* ================================================================ FORM GRID - 3 columns ================================================================ */ ._formGrid_75g5s_307 { width: 100%; display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); column-gap: var(--space-4); row-gap: var(--space-3); } /* ================================================================ FORM GROUP ================================================================ */ ._formGroup_75g5s_339 { min-width: 0; } ._label_75g5s_347 { display: block; margin-bottom: var(--space-1); color: var(--text-primary-dark); font-size: var(--font-size-xs); font-weight: var(--font-weight-medium); } ._required_75g5s_371 { color: var(--color-danger); } /* ================================================================ INPUTS & SELECT ================================================================ */ ._input_75g5s_387 { width: 100%; height: 34px; padding: 0 var(--space-2); border: 1px solid var(--border-default); border-radius: var(--radius-md); background: var(--color-white); color: var(--text-primary-dark); font-family: inherit; font-size: var(--font-size-sm); outline: none; transition: border-color var(--transition-fast); } ._input_75g5s_387:focus { border-color: var(--color-primary); } ._inputError_75g5s_441 { border-color: var(--color-danger); } ._inputError_75g5s_441:focus { border-color: var(--color-danger); } /* ================================================================ ERROR TEXT ================================================================ */ ._errorText_75g5s_465 { margin-top: var(--space-1); color: var(--color-danger); font-size: var(--font-size-xs); } /* ================================================================ RESPONSIVE ================================================================ */ /* Tablet - 2 fields */ @media (max-width: 1100px) { ._formGrid_75g5s_307 { grid-template-columns: repeat(2, minmax(0, 1fr)); } } /* Mobile - 1 field */ @media (max-width: 700px) { ._header_75g5s_45 { flex-direction: column; } ._headerActions_75g5s_99 { width: 100%; } ._headerActions_75g5s_99 ._btn_75g5s_125 { flex: 1; } ._formGrid_75g5s_307 { grid-template-columns: 1fr; } }._page_kd4mi_1 { width: 100%; min-width: 0; display: flex; flex-direction: column; gap: var(--space-4); padding-top: var(--space-4); box-sizing: border-box; } /* ================================================================ BACK LINK ================================================================ */ ._backLink_kd4mi_37 { display: inline-flex; align-items: center; width: fit-content; border: none; background: transparent; padding: 0; color: var(--color-primary); font-size: var(--font-size-xs); font-weight: var(--font-weight-medium); cursor: pointer; } ._backLink_kd4mi_37:hover { text-decoration: underline; } /* ================================================================ PAGE HEADER ================================================================ */ ._pageHeader_kd4mi_91 { width: 100%; display: flex; align-items: flex-start; justify-content: space-between; gap: var(--space-4); } ._pageTitle_kd4mi_111 { margin: 0 0 var(--space-1); font-size: var(--font-size-2xl); font-weight: var(--font-weight-bold); color: var(--text-primary-dark); } ._pageDescription_kd4mi_129 { margin: 0; font-size: var(--font-size-xs); color: var(--text-secondary); } ._headerActions_kd4mi_145 { display: flex; align-items: center; gap: var(--space-2); flex-shrink: 0; } /* ================================================================ COMMON CARD ================================================================ */ ._card_kd4mi_171 { width: 100%; background: var(--color-white); border: 1px solid var(--border-light); border-radius: var(--radius-lg); box-shadow: var(--shadow-sm); box-sizing: border-box; padding: var(--space-4); } ._sectionTitle_kd4mi_201 { margin: 0 0 var(--space-3); font-size: var(--font-size-base); font-weight: var(--font-weight-semibold); color: var(--text-primary-dark); } /* ================================================================ FORM GRID Campaign Name | Timezone Description | Start Time ================================================================ */ ._formGrid_kd4mi_231 { width: 100%; display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); column-gap: var(--space-4); row-gap: var(--space-3); align-items: start; } ._formGroup_kd4mi_255 { min-width: 0; } ._formGroup_kd4mi_255 > label, ._notesGroup_kd4mi_265 > label { display: block; margin-bottom: var(--space-1); color: var(--text-primary-dark); font-size: var(--font-size-xs); font-weight: var(--font-weight-medium); } ._formGroup_kd4mi_255 > label span { color: var(--color-danger); } ._formGroup_kd4mi_255 .app-input, ._formGroup_kd4mi_255 .app-select { width: 100%; height: 34px; padding-top: 0; padding-bottom: 0; box-sizing: border-box; } ._formGroup_kd4mi_255 .app-textarea { width: 100%; min-height: 64px; resize: vertical; box-sizing: border-box; } ._notesGroup_kd4mi_265 { grid-column: span 2; } ._notesGroup_kd4mi_265 textarea { width: 100%; min-height: 50px; resize: vertical; } /* ================================================================ START DATE / TIME FIELD Native calendar / clock icon only — no duplicate React icon ================================================================ */ ._dateTimeField_kd4mi_367 { width: 100%; display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: var(--space-2); } ._dateInputWrap_kd4mi_385, ._timeInputWrap_kd4mi_387 { min-width: 0; } ._dateInputWrap_kd4mi_385 .app-input, ._timeInputWrap_kd4mi_387 .app-input { width: 100%; height: 34px; padding-left: 12px; padding-right: 10px; box-sizing: border-box; } /* Old manual icon class is intentionally hidden. */ ._fieldIcon_kd4mi_419 { display: none; } /* ================================================================ EMAIL TEMPLATE ================================================================ */ ._templateSection_kd4mi_435 { margin-top: var(--space-4); padding-top: var(--space-4); border-top: 1px solid var(--border-light); } ._templateSection_kd4mi_435 > label { display: block; margin-bottom: var(--space-2); color: var(--text-primary-dark); font-size: var(--font-size-xs); font-weight: var(--font-weight-medium); } ._templateSection_kd4mi_435 > label span { color: var(--color-danger); } ._templateDropdownWrap_kd4mi_481 { position: relative; width: 100%; } ._templateCard_kd4mi_493 { width: 100%; display: flex; align-items: center; gap: var(--space-3); min-width: 0; /* Space for Preview + dropdown arrow inside the field */ padding: var(--space-3) 138px var(--space-3) var(--space-3); border: 1px solid var(--border-default); border-radius: var(--radius-md); background: var(--color-white); cursor: pointer; text-align: left; font: inherit; box-sizing: border-box; } ._templateCard_kd4mi_493:hover:not(:disabled) { border-color: var(--color-primary); } ._templateCard_kd4mi_493:disabled { cursor: not-allowed; opacity: 0.7; } ._templateThumb_kd4mi_565 { width: 56px; height: 40px; flex-shrink: 0; border-radius: var(--radius-sm); background: var(--color-bg-light); border: 1px solid var(--border-light); } ._templateInfo_kd4mi_591 { flex: 1; min-width: 0; display: flex; flex-direction: column; gap: 2px; } ._templateInfo_kd4mi_591 strong { font-size: var(--font-size-sm); font-weight: var(--font-weight-semibold); color: var(--text-primary-dark); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; } ._templateInfo_kd4mi_591 small { font-size: var(--font-size-xs); color: var(--text-secondary); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; } ._templateChevronBtn_kd4mi_653 { position: absolute; top: 50%; right: 10px; transform: translateY(-50%); z-index: 3; width: 28px; height: 28px; display: inline-flex; align-items: center; justify-content: center; border: 1px solid var(--border-default); border-radius: var(--radius-md); background: var(--color-white); color: var(--text-secondary); pointer-events: none; } ._templateInlinePreviewBtn_kd4mi_707 { position: absolute; top: 50%; right: 46px; transform: translateY(-50%); z-index: 4; height: 30px; display: inline-flex; align-items: center; justify-content: center; gap: 5px; padding: 0 10px; border: 1px solid #b7ceff; border-radius: 7px; background: #f6f9ff; color: var(--color-primary); font-size: 11px; font-weight: var(--font-weight-semibold); cursor: pointer; } ._templateInlinePreviewBtn_kd4mi_707:hover { border-color: var(--color-primary); background: #edf4ff; } /* ================================================================ EMAIL TEMPLATE DROPDOWN ================================================================ */ ._templateDropdownList_kd4mi_793 { position: absolute; top: calc(100% + var(--space-1)); left: 0; width: 100%; max-height: 220px; overflow-y: auto; display: flex; flex-direction: column; border: 1px solid var(--border-default); border-radius: var(--radius-md); background: var(--color-white); box-shadow: var(--shadow-md, var(--shadow-sm)); z-index: 30; padding: var(--space-1); box-sizing: border-box; } ._templateDropdownItem_kd4mi_849 { width: 100%; border: none; background: transparent; padding: var(--space-2) var(--space-3); border-radius: var(--radius-sm); color: var(--text-primary-dark); font-size: var(--font-size-sm); text-align: left; cursor: pointer; } ._templateDropdownItem_kd4mi_849:hover { background: var(--color-bg-light); } ._templateDropdownEmpty_kd4mi_897 { padding: var(--space-2) var(--space-3); color: var(--text-secondary); font-size: var(--font-size-xs); } /* ================================================================ SELECT CONTACTS HEADER ================================================================ */ ._selectHeader_kd4mi_921 { display: flex; align-items: flex-start; justify-content: space-between; gap: var(--space-3); margin-bottom: var(--space-3); } ._selectedBadge_kd4mi_941 { flex-shrink: 0; padding: 4px 10px; border-radius: var(--radius-full); background: var(--brand-soft); color: var(--brand-ink); font-size: var(--font-size-xs); font-weight: var(--font-weight-medium); white-space: nowrap; } ._selectAllLink_kd4mi_975 { border: none; background: transparent; padding: 0; color: var(--color-primary); font-size: var(--font-size-xs); font-weight: var(--font-weight-medium); cursor: pointer; white-space: nowrap; } ._selectAllLink_kd4mi_975:hover { text-decoration: underline; } /* ================================================================ ROW CHECKBOX ================================================================ */ ._rowCheckbox_kd4mi_1025 { width: 14px; height: 14px; margin: 0; accent-color: var(--color-primary); cursor: pointer; } /* ================================================================ EMAIL TEMPLATE PREVIEW MODAL ================================================================ */ ._previewModalOverlay_kd4mi_1055 { position: fixed; inset: 0; z-index: 5000; display: flex; align-items: center; justify-content: center; padding: 20px; background: rgba(15, 23, 42, 0.56); backdrop-filter: blur(3px); -webkit-backdrop-filter: blur(3px); } ._previewModal_kd4mi_1055 { width: min(780px, calc(100vw - 40px)); max-height: min(820px, calc(100vh - 40px)); display: flex; flex-direction: column; overflow: hidden; border: 1px solid #d9e1ec; border-radius: 16px; background: #ffffff; box-shadow: 0 28px 80px rgba(15, 23, 42, 0.24), 0 10px 30px rgba(15, 23, 42, 0.12); } /* ================================================================ MODAL HEADER ================================================================ */ ._previewModalHeader_kd4mi_1137 { min-height: 64px; display: flex; align-items: center; justify-content: space-between; gap: 16px; padding: 13px 16px 13px 18px; border-bottom: 1px solid #e6ebf2; background: #ffffff; box-sizing: border-box; } ._previewModalHeading_kd4mi_1173 { min-width: 0; } ._previewModalHeading_kd4mi_1173 h2 { margin: 0; color: var(--text-primary-dark); font-size: 15px; font-weight: var(--font-weight-semibold); line-height: 1.35; } ._previewModalHeading_kd4mi_1173 p { margin: 3px 0 0; color: var(--text-secondary); font-size: 11px; line-height: 1.4; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; } ._previewModalClose_kd4mi_1231 { width: 34px; height: 34px; flex-shrink: 0; display: inline-flex; align-items: center; justify-content: center; padding: 0; border: 1px solid #d8e0ea; border-radius: 9px; background: #ffffff; color: #64748b; cursor: pointer; transition: border-color 0.18s ease, background 0.18s ease, color 0.18s ease, transform 0.18s ease; } ._previewModalClose_kd4mi_1231:hover { border-color: #b7c8e6; background: #f7f9fc; color: #0f172a; transform: translateY(-1px); } /* ================================================================ MODAL BODY ================================================================ */ ._previewModalBody_kd4mi_1315 { flex: 1; min-height: 0; padding: 14px; overflow-y: auto; overflow-x: hidden; background: #f4f7fb; scrollbar-width: thin; scrollbar-color: #aeb9ca transparent; } ._previewModalBody_kd4mi_1315::-webkit-scrollbar { width: 7px; } ._previewModalBody_kd4mi_1315::-webkit-scrollbar-track { background: transparent; } ._previewModalBody_kd4mi_1315::-webkit-scrollbar-thumb { border-radius: 999px; background: #b9c3d1; } /* ================================================================ LOADING / EMPTY ================================================================ */ ._previewLoading_kd4mi_1381, ._previewEmpty_kd4mi_1383 { min-height: 320px; display: flex; align-items: center; justify-content: center; padding: 24px; color: var(--text-secondary); font-size: var(--font-size-sm); text-align: center; } /* ================================================================ SUBJECT ================================================================ */ ._previewSubject_kd4mi_1423 { min-height: 46px; display: grid; grid-template-columns: auto minmax(0, 1fr); align-items: center; gap: 12px; margin-bottom: 12px; padding: 10px 13px; border: 1px solid #dfe6ef; border-radius: 10px; background: #ffffff; box-sizing: border-box; } ._previewSubject_kd4mi_1423 span { color: #64748b; font-size: 11px; font-weight: 500; white-space: nowrap; } ._previewSubject_kd4mi_1423 strong { min-width: 0; color: #0f172a; font-size: 12px; font-weight: 600; line-height: 1.45; overflow-wrap: anywhere; } /* ================================================================ EMAIL PREVIEW SHELL ================================================================ */ ._emailPreviewShell_kd4mi_1517 { width: 100%; overflow: hidden; border: 1px solid #dce4ee; border-radius: 12px; background: #ffffff; box-shadow: 0 2px 10px rgba(15, 23, 42, 0.04); box-sizing: border-box; } ._emailPreviewToolbar_kd4mi_1547 { min-height: 42px; display: flex; align-items: center; padding: 0 13px; border-bottom: 1px solid #e5eaf1; background: #f8fafc; color: #55657d; font-size: 11px; font-weight: 600; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; } ._emailPreviewContent_kd4mi_1591 { width: 100%; min-width: 0; overflow: hidden; background: #ffffff; } /* * ORIGINAL EMAIL HTML IS NOT MODIFIED. * * The iframe uses the backend template exactly as received. * If it is wider than the modal, the entire original canvas is * scaled down. If it is smaller, the iframe uses the available width. */ ._exactPreviewViewport_kd4mi_1623 { position: relative; width: 100%; min-width: 0; overflow: hidden; background: #ffffff; } ._exactPreviewFrame_kd4mi_1645 { position: absolute; top: 0; left: 0; display: block; margin: 0; border: 0; background: #ffffff; transform-origin: top left; overflow: hidden; } /* ================================================================ PLAIN TEXT FALLBACK ================================================================ */ ._emailPreviewText_kd4mi_1691 { max-height: 520px; padding: 22px; overflow-y: auto; overflow-x: hidden; color: var(--text-primary-dark); font-size: var(--font-size-sm); line-height: 1.7; white-space: pre-wrap; overflow-wrap: anywhere; } /* ================================================================ RESPONSIVE ================================================================ */ @media (max-width: 900px) { ._formGrid_kd4mi_231 { grid-template-columns: 1fr; } ._notesGroup_kd4mi_265 { grid-column: span 1; } } @media (max-width: 700px) { ._pageHeader_kd4mi_91 { flex-direction: column; } ._headerActions_kd4mi_145 { width: 100%; } ._headerActions_kd4mi_145 .app-btn { flex: 1; } ._selectHeader_kd4mi_921 { flex-direction: column; } ._previewModalOverlay_kd4mi_1055 { padding: 10px; } ._previewModal_kd4mi_1055 { width: 100%; max-height: calc(100vh - 20px); } } @media (max-width: 560px) { ._dateTimeField_kd4mi_367 { grid-template-columns: 1fr; } ._templateCard_kd4mi_493 { padding-right: 122px; } ._templateInlinePreviewBtn_kd4mi_707 { right: 44px; height: 28px; padding: 0 8px; font-size: 10px; } ._previewModalHeader_kd4mi_1137 { padding: 12px 13px; } ._previewModalBody_kd4mi_1315 { padding: 8px; } ._previewSubject_kd4mi_1423 { align-items: flex-start; flex-direction: column; gap: 4px; } } /* ================================================================ PREVIEW MODAL RESPONSIVE OVERRIDES ================================================================ */ @media (max-width: 700px) { ._previewModalOverlay_kd4mi_1055 { padding: 10px; } ._previewModal_kd4mi_1055 { width: 100%; max-height: calc(100vh - 20px); border-radius: 12px; } ._previewModalHeader_kd4mi_1137 { min-height: 58px; padding: 11px 12px 11px 14px; } ._previewModalBody_kd4mi_1315 { padding: 10px; } } @media (max-width: 480px) { ._previewModalOverlay_kd4mi_1055 { padding: 6px; } ._previewModal_kd4mi_1055 { max-height: calc(100vh - 12px); border-radius: 10px; } ._previewSubject_kd4mi_1423 { grid-template-columns: 1fr; gap: 4px; } ._emailPreviewToolbar_kd4mi_1547 { min-height: 38px; padding: 0 10px; } } /* ================================================================ BACK LINK ================================================================ */ ._backLink_12xvc_9 { display: inline-flex; align-items: center; width: fit-content; border: none; background: transparent; padding: 0; color: var(--color-primary); font-size: var(--font-size-xs); font-weight: var(--font-weight-medium); cursor: pointer; } ._backLink_12xvc_9:hover { text-decoration: underline; } /* ================================================================ TITLE ROW (name + status badge) ================================================================ */ ._titleRow_12xvc_63 { display: flex; align-items: center; gap: var(--space-2); margin-bottom: var(--space-1); } ._titleRow_12xvc_63 .ct-page-title { margin: 0; } /* ================================================================ PAUSE BUTTON (amber outline) ================================================================ */ ._pauseBtn_12xvc_97 { display: inline-flex; align-items: center; gap: var(--space-2); border: 1px solid var(--color-warning, #f59e0b); background: var(--color-white); color: var(--color-warning, #b45309); } ._pauseBtn_12xvc_97:hover { background: var(--color-warning-soft, #fff7ed); } /* ================================================================ META ROW ================================================================ */ ._metaRow_12xvc_139 { display: flex; align-items: center; flex-wrap: wrap; gap: var(--space-5); padding: var(--space-3) var(--space-4); border: 1px solid var(--border-light); border-radius: var(--radius-md); background: var(--color-white); } ._metaItem_12xvc_171 { display: inline-flex; align-items: center; gap: var(--space-2); color: var(--text-secondary); font-size: var(--font-size-xs); } ._metaItem_12xvc_171 strong { color: var(--text-primary-dark); font-weight: var(--font-weight-medium); } /* ================================================================ SECTION TITLE ================================================================ */ ._sectionTitle_12xvc_213 { margin: 0 0 var(--space-2); font-size: var(--font-size-base); font-weight: var(--font-weight-semibold); color: var(--text-primary-dark); } /* ================================================================ CAMPAIGN PROGRESS GRID (6 cards) ================================================================ */ ._progressGrid_12xvc_239 { display: grid; grid-template-columns: repeat(6, minmax(0, 1fr)); gap: var(--space-3); } ._statTop_12xvc_255 { display: flex; align-items: flex-start; justify-content: space-between; margin-bottom: var(--space-1); } ._statLabel_12xvc_271 { font-size: var(--font-size-xs); color: var(--text-secondary); } ._statSub_12xvc_283 { margin-top: 2px; font-size: var(--font-size-xs); color: var(--text-secondary); } ._statIconSm_12xvc_299 { width: 24px; height: 24px; flex-shrink: 0; display: flex; align-items: center; justify-content: center; border-radius: var(--radius-full); font-size: 13px; } ._statIconSm_12xvc_299._blue_12xvc_329 { background: var(--color-info-soft, #e8f1ff); color: var(--color-info, #2563eb); } ._statIconSm_12xvc_299._green_12xvc_339 { background: var(--color-success-soft, #e6f7ec); color: var(--color-success, #16a34a); } ._statIconSm_12xvc_299._amber_12xvc_349 { background: var(--color-warning-soft, #fff7ed); color: var(--color-warning, #b45309); } ._statIconSm_12xvc_299._red_12xvc_359 { background: var(--color-danger-soft, #fdecec); color: var(--color-danger, #dc2626); } /* ================================================================ EMAIL ENGAGEMENT GRID (4 cards) ================================================================ */ ._engagementGrid_12xvc_377 { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: var(--space-3); } ._engagementTop_12xvc_393 { display: flex; align-items: center; gap: var(--space-2); margin-bottom: var(--space-2); } ._engagementPercent_12xvc_411 { margin-top: 2px; font-size: var(--font-size-xs); font-weight: var(--font-weight-semibold); } ._engagementPercent_12xvc_411._greenText_12xvc_425 { color: var(--color-success, #16a34a); } ._engagementPercent_12xvc_411._blueText_12xvc_433 { color: var(--color-info, #2563eb); } ._engagementPercent_12xvc_411._purpleText_12xvc_441 { color: var(--color-purple, #7c3aed); } ._rateTrack_12xvc_449 { width: 100%; height: 5px; margin-top: var(--space-2); border-radius: var(--radius-full); background: var(--border-light); overflow: hidden; } ._rateFill_12xvc_475 { height: 100%; border-radius: var(--radius-full); } ._rateFill_12xvc_475._greenBar_12xvc_487 { background: var(--color-success, #16a34a); } ._rateFill_12xvc_475._blueBar_12xvc_495 { background: var(--color-info, #2563eb); } ._rateFill_12xvc_475._purpleBar_12xvc_503 { background: var(--color-purple, #7c3aed); } /* ================================================================ CONTACT ACTIVITY HEADER ================================================================ */ ._activityHeader_12xvc_519 { display: flex; align-items: flex-start; justify-content: space-between; gap: var(--space-3); margin-bottom: var(--space-3); } ._activityHeader_12xvc_519 .ct-page-sub { margin: 0; } ._recipientsCount_12xvc_547 { flex-shrink: 0; padding-top: 2px; color: var(--text-secondary); font-size: var(--font-size-xs); white-space: nowrap; } /* ================================================================ BADGE WITH ICON ================================================================ */ ._badgeWithIcon_12xvc_579 { display: inline-flex; align-items: center; gap: 4px; } /* ================================================================ YES / NO / DASH CELLS ================================================================ */ ._yesCell_12xvc_601 { display: inline-flex; align-items: center; gap: 4px; color: var(--text-primary-dark); font-size: var(--font-size-xs); } ._noCell_12xvc_623 { display: inline-flex; align-items: center; gap: 4px; color: var(--text-secondary); font-size: var(--font-size-xs); } ._dashCell_12xvc_645 { color: var(--text-secondary); font-size: var(--font-size-xs); } ._iconSuccess_12xvc_657 { color: var(--color-success, #16a34a); } ._iconInfo_12xvc_665 { color: var(--color-info, #2563eb); } /* ================================================================ RESPONSIVE ================================================================ */ @media (max-width: 1200px) { ._progressGrid_12xvc_239 { grid-template-columns: repeat(3, minmax(0, 1fr)); } ._engagementGrid_12xvc_377 { grid-template-columns: repeat(2, minmax(0, 1fr)); } } @media (max-width: 700px) { ._progressGrid_12xvc_239 { grid-template-columns: repeat(2, minmax(0, 1fr)); } ._engagementGrid_12xvc_377 { grid-template-columns: 1fr; } ._metaRow_12xvc_139 { flex-direction: column; align-items: flex-start; gap: var(--space-2); } ._activityHeader_12xvc_519 { flex-direction: column; } } /* ================================================================ CAMPAIGN PROGRESS GRID (5 cards, colored top bar) ================================================================ */ ._progressGrid_12xvc_239 { display: grid; grid-template-columns: repeat(5, minmax(0, 1fr)); gap: var(--space-3); } ._statCard_12xvc_767 { position: relative; border-top: 3px solid transparent; border-radius: var(--radius-md); overflow: hidden; } ._statCard_12xvc_767._blueCard_12xvc_785 { border-top-color: var(--color-info, #2563eb); } ._statCard_12xvc_767._greenCard_12xvc_793 { border-top-color: var(--color-success, #16a34a); } ._statCard_12xvc_767._amberCard_12xvc_801 { border-top-color: var(--color-warning, #f59e0b); } ._statCard_12xvc_767._redCard_12xvc_809 { border-top-color: var(--color-danger, #dc2626); } ._statTop_12xvc_255 { display: flex; align-items: flex-start; justify-content: space-between; margin-bottom: var(--space-3); } ._statLabel_12xvc_271 { font-size: var(--font-size-xs); font-weight: var(--font-weight-medium); letter-spacing: 0.04em; text-transform: uppercase; color: var(--text-secondary); } ._statValueLg_12xvc_851 { font-size: var(--font-size-xl, 22px); font-weight: var(--font-weight-bold, 700); color: var(--text-primary-dark); } ._statIconSm_12xvc_299 { width: 24px; height: 24px; flex-shrink: 0; display: flex; align-items: center; justify-content: center; border-radius: var(--radius-full); font-size: 13px; } ._statIconSm_12xvc_299._blue_12xvc_329 { background: var(--color-info-soft, #e8f1ff); color: var(--color-info, #2563eb); } ._statIconSm_12xvc_299._green_12xvc_339 { background: var(--color-success-soft, #e6f7ec); color: var(--color-success, #16a34a); } ._statIconSm_12xvc_299._amber_12xvc_349 { background: var(--color-warning-soft, #fff7ed); color: var(--color-warning, #b45309); } ._statIconSm_12xvc_299._red_12xvc_359 { background: var(--color-danger-soft, #fdecec); color: var(--color-danger, #dc2626); } @media (max-width: 1200px) { ._progressGrid_12xvc_239 { grid-template-columns: repeat(3, minmax(0, 1fr)); } ._engagementGrid_12xvc_377 { grid-template-columns: repeat(2, minmax(0, 1fr)); } } ._statRow_12xvc_955 { display: flex; align-items: center; gap: var(--space-2); } ._statLabel_12xvc_271 { font-size: var(--font-size-xs); font-weight: var(--font-weight-medium); letter-spacing: 0.04em; text-transform: uppercase; color: var(--text-secondary); white-space: nowrap; } ._statValueLg_12xvc_851 { margin-left: auto; font-size: var(--font-size-lg, 18px); font-weight: var(--font-weight-bold, 700); color: var(--text-primary-dark); } ._statIconSm_12xvc_299 { width: 22px; height: 22px; flex-shrink: 0; display: flex; align-items: center; justify-content: center; border-radius: var(--radius-full); font-size: 12px; } /* ================================================================ EMAIL ENGAGEMENT GRID (4 cards, single inline row each) ================================================================ */ ._engagementGrid_12xvc_377 { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: var(--space-3); } ._engagementRow_12xvc_1063 { display: flex; align-items: center; gap: var(--space-2); } ._engagementIconBox_12xvc_1077 { width: 32px; height: 32px; flex-shrink: 0; display: flex; align-items: center; justify-content: center; border-radius: var(--radius-md); font-size: 15px; } ._engagementIconBox_12xvc_1077._green_12xvc_339 { background: var(--color-success-soft, #e6f7ec); color: var(--color-success, #16a34a); } ._engagementIconBox_12xvc_1077._blue_12xvc_329 { background: var(--color-info-soft, #e8f1ff); color: var(--color-info, #2563eb); } ._engagementIconBox_12xvc_1077._purple_12xvc_441 { background: var(--color-purple-soft, #f1e9fe); color: var(--color-purple, #7c3aed); } ._engagementValue_12xvc_1137 { flex-shrink: 0; font-size: var(--font-size-lg, 18px); font-weight: var(--font-weight-bold, 700); color: var(--text-primary-dark); } ._engagementPercent_12xvc_411 { flex-shrink: 0; font-size: var(--font-size-xs); font-weight: var(--font-weight-semibold); } ._engagementPercent_12xvc_411._greenText_12xvc_425 { color: var(--color-success, #16a34a); } ._engagementPercent_12xvc_411._blueText_12xvc_433 { color: var(--color-info, #2563eb); } ._engagementPercent_12xvc_411._purpleText_12xvc_441 { color: var(--color-purple, #7c3aed); } ._rateTrack_12xvc_449 { flex: 1; height: 5px; margin-left: var(--space-2); border-radius: var(--radius-full); background: var(--border-light); overflow: hidden; } ._rateFill_12xvc_475 { height: 100%; border-radius: var(--radius-full); } ._rateFill_12xvc_475._greenBar_12xvc_487 { background: var(--color-success, #16a34a); } ._rateFill_12xvc_475._blueBar_12xvc_495 { background: var(--color-info, #2563eb); } ._rateFill_12xvc_475._purpleBar_12xvc_503 { background: var(--color-purple, #7c3aed); } ._rateTrack_12xvc_449 { flex: 1; height: 5px; margin-left: var(--space-2); border-radius: 999px; background: #e5e7eb; /* fallback instead of var(--border-light) */ overflow: hidden; min-width: 90px; }/* ================================================================ STAT ICON — GREEN VARIANT (blue + amber already exist globally as .ct-stat-icon.blue/.amber; this adds the green variant used by Active / Completed) ================================================================ */ ._green_1wly6_13 { background: var(--color-success-soft, #e6f7ec); color: var(--color-success, #16a34a); } /* ================================================================ TABS ================================================================ */ ._tabs_1wly6_33 { display: flex; align-items: center; gap: var(--space-4); border-bottom: 1px solid var(--border-light); } ._tabBtn_1wly6_51 { position: relative; padding: var(--space-2) 0 var(--space-3); border: none; background: transparent; color: var(--text-secondary); font-size: var(--font-size-sm); font-weight: var(--font-weight-medium); cursor: pointer; } ._tabBtn_1wly6_51:hover { color: var(--text-primary-dark); } ._tabActive_1wly6_91 { color: var(--color-primary); font-weight: var(--font-weight-semibold); } ._tabActive_1wly6_91::after { content: ""; position: absolute; left: 0; right: 0; bottom: -1px; height: 2px; border-radius: var(--radius-full); background: var(--color-primary); } /* ================================================================ OPEN RATE CELL ================================================================ */ ._rateCell_1wly6_141 { display: flex; flex-direction: column; gap: 4px; min-width: 90px; } ._rateValue_1wly6_159 { font-size: var(--font-size-xs); font-weight: var(--font-weight-semibold); color: var(--color-success, #16a34a); } ._rateEmpty_1wly6_173 { font-size: var(--font-size-xs); font-weight: var(--font-weight-medium); color: var(--text-secondary); } ._rateTrack_1wly6_187 { width: 100%; height: 5px; border-radius: var(--radius-full); background: var(--border-light); overflow: hidden; } ._rateFill_1wly6_209 { height: 100%; border-radius: var(--radius-full); background: var(--color-success, #16a34a); } ._rateFillEmpty_1wly6_225 { height: 100%; border-radius: var(--radius-full); background: var(--border-light); } /* ================================================================ ACTIONS CELL ================================================================ */ ._actionsCell_1wly6_249 { display: flex; align-items: center; gap: var(--space-2); } /* ================================================================ RESPONSIVE ================================================================ */ @media (max-width: 700px) { ._tabs_1wly6_33 { overflow-x: auto; white-space: nowrap; -ms-overflow-style: none; scrollbar-width: none; } ._tabs_1wly6_33::-webkit-scrollbar { display: none; } }._page_1g925_1 { width: 100%; min-width: 0; padding: 22px 0; color: var(--text-primary-dark); box-sizing: border-box; --social-tab-height: calc(100dvh - 105px); } /* ====================================================== HEADER ====================================================== */ ._header_1g925_31 { width: 100%; display: flex; align-items: flex-start; justify-content: space-between; gap: var(--space-4); margin-bottom: var(--space-3); } ._headerCopy_1g925_55 { min-width: 0; } ._titleRow_1g925_63 { display: flex; align-items: center; flex-wrap: wrap; gap: var(--space-2); } ._titleRow_1g925_63 h1 { margin: 0; color: var(--text-primary-dark); font-size: var(--font-size-2xl); font-weight: var(--font-weight-bold); } ._headerCopy_1g925_55>p { margin: var(--space-1) 0 0; color: var(--text-secondary); font-size: var(--font-size-sm); } /* Static title status badge - deliberately no animation */ ._statusMetaBadge_1g925_117 { min-height: 27px; display: inline-flex; align-items: center; gap: 6px; padding: 3px 10px; border-radius: var(--radius-full); color: var(--publish-status-color, var(--color-warning)); background: var(--publish-status-bg, color-mix(in srgb, var(--color-warning) 10%, var(--color-white))); font-size: var(--font-size-xs); font-weight: var(--font-weight-medium); } ._statusMetaDot_1g925_159 { width: 7px; height: 7px; flex-shrink: 0; border-radius: var(--radius-full); background: var(--color-warning); } ._headerActions_1g925_181 { display: flex; align-items: center; gap: var(--space-2); flex-shrink: 0; } /* Do not redefine primary/secondary button colors or hover here. .app-btn, .app-btn-primary and .app-btn-secondary come from global CSS. */ ._moreButton_1g925_209 { width: 38px; min-width: 38px; padding-left: 0 !important; padding-right: 0 !important; } /* Only the Publish button spinner animates, and only after click */ ._publishSpinner_1g925_229 { width: 17px; height: 17px; display: inline-block; border: 2px dotted currentColor; border-radius: var(--radius-full); animation: _publishSpin_1g925_229 0.9s linear infinite; } /* ====================================================== MAIN TABS ====================================================== */ ._tabs_1g925_263 { width: 100%; min-height: 44px; display: flex; align-items: center; gap: var(--space-6); margin-bottom: var(--space-3); border-bottom: 1px solid var(--border-light); } ._tabs_1g925_263 button { position: relative; min-height: 44px; padding: 0 var(--space-2); border: 0; background: transparent; color: var(--text-secondary); font-family: inherit; font-size: var(--font-size-sm); font-weight: var(--font-weight-medium); cursor: pointer; } ._tabs_1g925_263 ._activeTab_1g925_333 { color: var(--color-primary); } ._tabs_1g925_263 ._activeTab_1g925_333::after { content: ""; position: absolute; left: 0; right: 0; bottom: -1px; height: 2px; background: var(--color-primary); } /* ====================================================== MAIN GRID ====================================================== */ ._mainGrid_1g925_377 { width: 100%; display: grid; /* Reference-style left/right ratio */ grid-template-columns: minmax(0, 1.68fr) minmax(350px, 0.94fr); gap: var(--space-4); align-items: stretch; } ._card_1g925_403 { min-width: 0; border: 1px solid var(--border-light); border-radius: var(--radius-lg); background: var(--color-white); box-shadow: var(--shadow-sm); } ._previewCard_1g925_427 { height: 100%; padding-bottom: var(--space-3); } ._sectionHeader_1g925_439, ._sideHeader_1g925_441 { padding: var(--space-4); } ._sectionHeader_1g925_439 { padding-bottom: var(--space-3); } ._sectionHeader_1g925_439 h2, ._sideHeader_1g925_441 h3 { margin: 0; color: var(--text-primary-dark); font-size: var(--font-size-lg); font-weight: var(--font-weight-bold); } ._sectionHeader_1g925_439 p { margin: var(--space-1) 0 0; color: var(--text-secondary); font-size: var(--font-size-sm); line-height: 1.5; } /* ====================================================== PLATFORM NAVIGATION ====================================================== */ ._platformNavigation_1g925_505 { display: grid; grid-template-columns: 38px minmax(0, 1fr) 38px; align-items: center; gap: var(--space-3); padding: 0 var(--space-4) var(--space-3); } ._arrowButton_1g925_529 { width: 36px !important; min-width: 36px !important; height: 36px; padding: 0 !important; border-radius: var(--radius-full) !important; } ._platformTabs_1g925_549 { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: var(--space-3); } ._platformTab_1g925_549 { min-width: 0; min-height: 58px; display: grid; grid-template-columns: auto minmax(0, 1fr) auto; align-items: center; gap: var(--space-2); padding: var(--space-2) var(--space-3); border: 1px solid var(--border-light); border-radius: var(--radius-md); background: var(--color-white); color: var(--text-primary-dark); font-family: inherit; cursor: pointer; transition: border-color var(--transition-fast), background-color var(--transition-fast), box-shadow var(--transition-fast); } ._platformTab_1g925_549:hover { border-color: var(--border-default); background: var(--color-bg-light); } ._platformTabActive_1g925_641 { border-color: var(--color-primary); background: var(--brand-soft); box-shadow: 0 0 0 1px var(--color-primary); } ._platformLabel_1g925_657 { min-width: 0; color: var(--text-primary-dark); font-size: var(--font-size-sm); font-weight: var(--font-weight-medium); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; } /* ====================================================== REAL SOCIAL PLATFORM ICONS ====================================================== */ ._platformIcon_1g925_695 { width: 30px; height: 30px; flex-shrink: 0; display: inline-flex; align-items: center; justify-content: center; border-radius: var(--radius-full); color: var(--color-white); font-size: var(--font-size-sm); } ._platformIconSmall_1g925_729 { width: 25px; height: 25px; font-size: var(--font-size-xs); } ._facebookIcon_1g925_743 { background: #1877f2; } ._telegramIcon_1g925_751 { background: #229ed9; } ._acceptedBadge_1g925_759 { display: inline-flex; align-items: center; gap: 5px; padding: 4px 8px; border-radius: var(--radius-full); color: var(--color-success); background: color-mix(in srgb, var(--color-success) 10%, var(--color-white)); font-size: var(--font-size-xs); font-weight: var(--font-weight-medium); } /* ====================================================== PREVIEW AREA ====================================================== */ ._previewArea_1g925_803 { width: 100%; } ._socialPost_1g925_811 { width: min(610px, calc(100% - 88px)); margin: 0 auto; overflow: hidden; border: 1px solid var(--border-light); border-radius: var(--radius-lg); background: var(--color-white); box-shadow: var(--shadow-sm); } /* ====================================================== FACEBOOK POST ====================================================== */ ._facebookHeader_1g925_851, ._telegramHeader_1g925_853 { min-height: 58px; display: flex; align-items: center; gap: var(--space-2); padding: 0 var(--space-3); } ._brandAvatar_1g925_875 { width: 34px; height: 34px; flex-shrink: 0; display: inline-flex; align-items: center; justify-content: center; border-radius: var(--radius-full); color: var(--color-danger); background: color-mix(in srgb, var(--color-danger) 10%, var(--color-white)); font-size: var(--font-size-sm); font-weight: var(--font-weight-bold); } ._accountMeta_1g925_915 { min-width: 0; flex: 1; } ._accountMeta_1g925_915 strong, ._accountMeta_1g925_915 span { display: block; } ._accountMeta_1g925_915 strong { color: var(--text-primary-dark); font-size: var(--font-size-sm); font-weight: var(--font-weight-semibold); } ._accountMeta_1g925_915>span { margin-top: 2px; display: flex; align-items: center; gap: 4px; color: var(--text-muted); font-size: var(--font-size-xs); } ._moreIcon_1g925_977 { color: var(--text-primary-dark); flex-shrink: 0; } ._facebookCopy_1g925_989 { padding: 0 var(--space-3) var(--space-3); } ._facebookCopy_1g925_989 p, ._telegramCopy_1g925_999 p { margin: 0; color: var(--text-primary-dark); font-size: var(--font-size-sm); line-height: 1.55; } ._hashtags_1g925_1019 { display: flex; flex-wrap: wrap; gap: 5px; margin-top: var(--space-2); } ._hashtags_1g925_1019 span { color: var(--color-primary); font-size: var(--font-size-sm); } /* ====================================================== MEDIA ART ====================================================== */ ._mediaImage_1g925_1057 { width: min(100%, 460px); max-width: 460px; display: block; margin: 0 auto; aspect-ratio: 1 / 1; object-fit: contain !important; object-position: center; background: #fff; } ._mediaArtwork_1g925_1087 { position: relative; width: 100%; aspect-ratio: 1.78 / 1; overflow: hidden; background: radial-gradient(circle at 72% 44%, color-mix(in srgb, var(--color-primary) 30%, transparent), transparent 28%), linear-gradient(145deg, var(--color-sidebar-dark), var(--color-sidebar-bg)); } ._artTitle_1g925_1119 { position: absolute; top: 10%; left: 8%; display: flex; flex-direction: column; z-index: 2; } ._artTitle_1g925_1119 strong { color: var(--color-white); font-size: calc(var(--font-size-2xl) * 1.65); line-height: 0.98; } ._artTitle_1g925_1119 strong:nth-child(2) { color: var(--color-warning); } ._artWindow_1g925_1167 { position: absolute; top: 15%; right: 9%; width: 34%; height: 49%; border: 1px solid color-mix(in srgb, var(--color-primary) 50%, var(--border-light)); border-radius: var(--radius-lg); background: color-mix(in srgb, var(--color-primary) 22%, var(--color-sidebar-dark)); } ._artMail_1g925_1203 { position: absolute; top: 10%; left: 12%; width: 52px; height: 38px; display: flex; align-items: center; justify-content: center; border: 2px solid var(--color-primary-light); border-radius: var(--radius-md); color: var(--color-primary-light); } ._artBot_1g925_1243 { position: absolute; right: 10%; bottom: 8%; width: 72px; height: 72px; display: flex; align-items: center; justify-content: center; border: 6px solid var(--color-danger); border-radius: var(--radius-full); color: var(--color-white); background: color-mix(in srgb, var(--color-primary) 32%, var(--color-sidebar-dark)); font-size: var(--font-size-sm); font-weight: var(--font-weight-bold); } ._artPeople_1g925_1297, ._artMessage_1g925_1299, ._artCheck_1g925_1301 { position: absolute; display: flex; align-items: center; justify-content: center; border-radius: var(--radius-full); color: var(--color-white); } ._artPeople_1g925_1297 { left: 35%; bottom: 20%; width: 58px; height: 58px; background: var(--color-primary); } ._artMessage_1g925_1299 { left: 53%; bottom: 16%; width: 46px; height: 46px; background: var(--color-primary); } ._artCheck_1g925_1301 { left: 44%; bottom: 5%; width: 50px; height: 50px; background: var(--color-success); font-size: var(--font-size-xl); } ._artBars_1g925_1389 { position: absolute; right: 8%; bottom: 8%; display: flex; align-items: flex-end; gap: 7px; } ._artBars_1g925_1389 span { width: 15px; display: block; border-radius: var(--radius-sm) var(--radius-sm) 0 0; background: var(--color-warning); } ._artBars_1g925_1389 span:nth-child(1) { height: 30px; } ._artBars_1g925_1389 span:nth-child(2) { height: 46px; } ._artBars_1g925_1389 span:nth-child(3) { height: 64px; } ._artBars_1g925_1389 span:nth-child(4) { height: 86px; } /* ====================================================== FACEBOOK NATIVE-LIKE ACTION AREA ====================================================== */ ._facebookEngagement_1g925_1473 { min-height: 34px; display: flex; align-items: center; justify-content: space-between; gap: var(--space-2); padding: 0 var(--space-3); border-bottom: 1px solid var(--border-light); color: var(--text-muted); font-size: var(--font-size-xs); } ._facebookReaction_1g925_1509 { display: flex; align-items: center; gap: 5px; } ._facebookLikeBubble_1g925_1523 { width: 20px; height: 20px; display: inline-flex; align-items: center; justify-content: center; border-radius: var(--radius-full); background: #1877f2; color: var(--color-white); font-size: 10px; } ._facebookActions_1g925_1557 { min-height: 44px; display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); align-items: center; } ._facebookActions_1g925_1557 button { min-height: 42px; display: inline-flex; align-items: center; justify-content: center; gap: var(--space-2); border: 0; background: transparent; color: var(--text-secondary); font-family: inherit; font-size: var(--font-size-sm); cursor: pointer; } ._facebookActions_1g925_1557 button:hover { background: var(--color-bg-light); } /* ====================================================== TELEGRAM NATIVE-LIKE POST ====================================================== */ ._telegramPost_1g925_1637 { background: var(--color-white); } ._telegramHeader_1g925_853 { border-bottom: 1px solid var(--border-light); } ._telegramCopy_1g925_999 { padding: var(--space-3); } ._telegramFooter_1g925_1661 { min-height: 42px; display: grid; grid-template-columns: 1fr auto auto; align-items: center; gap: var(--space-3); padding: 0 var(--space-3); border-top: 1px solid var(--border-light); color: var(--text-muted); font-size: var(--font-size-xs); } ._telegramFooter_1g925_1661>span:first-child { display: inline-flex; align-items: center; gap: 5px; } ._telegramFooter_1g925_1661 button { width: 30px; height: 30px; display: inline-flex; align-items: center; justify-content: center; border: 0; border-radius: var(--radius-full); background: transparent; color: #229ed9; font-size: var(--font-size-lg); cursor: pointer; } ._telegramFooter_1g925_1661 button:hover { background: var(--color-bg-light); } /* ====================================================== PREVIEW META ====================================================== */ ._previewMeta_1g925_1773 { min-height: 48px; margin: var(--space-3) var(--space-4) 0; padding: 0 var(--space-3); display: grid; grid-template-columns: 1fr auto 1fr; align-items: center; gap: var(--space-3); border: 1px solid var(--border-light); border-radius: var(--radius-md); color: var(--text-secondary); font-size: var(--font-size-xs); } ._previewMeta_1g925_1773>div { display: flex; align-items: center; gap: var(--space-2); } ._previewMeta_1g925_1773>span { text-align: right; } ._mediaAccepted_1g925_1843 { color: var(--color-success); } /* ====================================================== RIGHT COLUMN Grid rows stretch to the SAME total height as left card. ====================================================== */ ._rightColumn_1g925_1861 { min-width: 0; height: auto; display: grid; grid-template-rows: auto auto auto auto; gap: var(--space-3); align-content: start; } ._rightColumn_1g925_1861>._card_1g925_403 { min-height: 0; } ._sideHeader_1g925_441 { padding-bottom: var(--space-2); } /* ====================================================== PUBLISHING STATUS ====================================================== */ ._publishingSummary_1g925_1911 { display: flex; align-items: center; gap: var(--space-3); padding: 0 var(--space-4) var(--space-3); } /* Static ring - no animation */ ._staticPublishingRing_1g925_1933 { width: 36px; height: 36px; flex-shrink: 0; border: 4px dotted var(--color-warning); border-radius: var(--radius-full); } ._publishingSummary_1g925_1911 strong, ._publishingSummary_1g925_1911>div>span { display: block; } ._publishingSummary_1g925_1911 strong { color: var(--text-primary-dark); font-size: var(--font-size-lg); } ._publishingSummary_1g925_1911>div>span { margin-top: 2px; color: var(--text-secondary); font-size: var(--font-size-sm); } ._progressBar_1g925_1993 { height: 5px; margin: 0 var(--space-4) var(--space-3); overflow: hidden; border-radius: var(--radius-full); background: var(--color-warning); } ._progressBar_1g925_1993>span { width: 64%; height: 100%; display: block; background: var(--color-primary); } ._publishRows_1g925_2035 { display: flex; flex-direction: column; gap: var(--space-3); padding: 0 var(--space-4); } ._publishRow_1g925_2035 { display: flex; align-items: center; justify-content: space-between; gap: var(--space-3); } ._publishPlatform_1g925_2069, ._publishingText_1g925_2071, ._queuedText_1g925_2073 { display: inline-flex; align-items: center; gap: var(--space-2); } ._publishPlatform_1g925_2069 { color: var(--text-primary-dark); font-size: var(--font-size-sm); } ._publishingText_1g925_2071 { color: var(--color-primary); font-size: var(--font-size-sm); } /* Static blue dotted ring - no animation */ ._staticBlueRing_1g925_2115 { width: 16px; height: 16px; display: inline-block; border: 2px dotted var(--color-primary); border-radius: var(--radius-full); } ._queuedText_1g925_2073 { color: var(--text-primary-dark); font-size: var(--font-size-sm); } ._queuedText_1g925_2073 svg { width: 16px; height: 16px; flex-shrink: 0; stroke-width: 2; } /* Dynamic API publishing status */ ._statusPublished_1g925_2171 { --publish-status-color: var(--color-success); --publish-status-bg: color-mix(in srgb, var(--color-success) 11%, var(--color-white)); } ._statusPublishing_1g925_2185 { --publish-status-color: var(--color-primary); --publish-status-bg: color-mix(in srgb, var(--color-primary) 10%, var(--color-white)); } ._statusQueued_1g925_2199 { --publish-status-color: var(--color-warning); --publish-status-bg: color-mix(in srgb, var(--color-warning) 10%, var(--color-white)); } ._statusFailed_1g925_2213 { --publish-status-color: var(--color-danger); --publish-status-bg: color-mix(in srgb, var(--color-danger) 10%, var(--color-white)); } ._statusDefault_1g925_2227 { --publish-status-color: var(--text-secondary); --publish-status-bg: var(--color-bg-light); } ._publishStatusIcon_1g925_2237 { width: 17px; height: 17px; flex-shrink: 0; color: var(--publish-status-color, currentColor); stroke-width: 2.5; } ._publishStatusIconLarge_1g925_2259 { width: 36px; height: 36px; flex-shrink: 0; color: var(--publish-status-color, currentColor); stroke-width: 2.2; } ._dynamicStatusRing_1g925_2281 { width: 16px; height: 16px; display: inline-block; flex-shrink: 0; border: 2px dotted var(--publish-status-color, var(--color-primary)); border-radius: var(--radius-full); } ._dynamicStatusRingLarge_1g925_2305 { width: 36px; height: 36px; border-width: 4px; } ._publishStatusText_1g925_2319 { display: inline-flex; align-items: center; gap: var(--space-2); color: var(--publish-status-color, var(--text-secondary)); font-size: var(--font-size-sm); font-weight: var(--font-weight-medium); } ._updateText_1g925_2343 { margin: var(--space-3) var(--space-4) var(--space-4); color: var(--text-muted); font-size: var(--font-size-xs); } /* ====================================================== AI CONTENT REVIEW ====================================================== */ ._reviewContent_1g925_2367 { display: grid; grid-template-columns: 120px minmax(0, 1fr); align-items: center; gap: var(--space-3); padding: 0 var(--space-4) var(--space-4); } ._scoreRing_1g925_2391 { width: 96px; height: 96px; display: flex; flex-direction: column; align-items: center; justify-content: center; border: 7px solid color-mix(in srgb, var(--color-primary) 16%, var(--border-light)); border-top-color: var(--color-primary); border-right-color: var(--color-primary); border-radius: var(--radius-full); } ._scoreRing_1g925_2391 strong { color: var(--text-primary-dark); font-size: calc(var(--font-size-2xl) * 1.4); line-height: 1; } ._scoreRing_1g925_2391 span { margin-top: 4px; color: var(--text-secondary); font-size: var(--font-size-xs); } ._reviewDetails_1g925_2459 { min-width: 0; } ._goodBadge_1g925_2467 { display: inline-flex; align-items: center; padding: 4px 12px; border-radius: var(--radius-full); color: var(--color-success); background: color-mix(in srgb, var(--color-success) 11%, var(--color-white)); font-size: var(--font-size-xs); font-weight: var(--font-weight-semibold); } ._reviewDetails_1g925_2459 p { margin: var(--space-2) 0; color: var(--text-primary-dark); font-size: var(--font-size-sm); line-height: 1.5; } /* ====================================================== MEDIA CARD ====================================================== */ ._mediaContent_1g925_2527 { display: grid; grid-template-columns: 145px minmax(0, 1fr); gap: var(--space-3); padding: 0 var(--space-4) var(--space-4); } ._mediaImageSmall_1g925_2547, ._mediaArtworkSmall_1g925_2549 { width: 145px; height: 94px; display: block; overflow: hidden; border-radius: var(--radius-md); object-fit: cover; } ._mediaArtworkSmall_1g925_2549 { padding: var(--space-3); background: linear-gradient(145deg, var(--color-sidebar-dark), var(--color-sidebar-bg)); } ._mediaArtworkSmall_1g925_2549 strong { display: block; color: var(--color-white); font-size: var(--font-size-sm); font-weight: var(--font-weight-bold); line-height: 0.95; } ._mediaArtworkSmall_1g925_2549 strong:nth-child(2) { color: var(--color-warning); } ._mediaInfo_1g925_2621 { min-width: 0; } ._mediaInfo_1g925_2621>div { display: grid; grid-template-columns: 70px minmax(0, 1fr); gap: var(--space-2); margin-bottom: var(--space-2); } ._mediaInfo_1g925_2621 span { color: var(--text-secondary); font-size: var(--font-size-xs); } ._mediaInfo_1g925_2621 strong { color: var(--text-primary-dark); font-size: var(--font-size-xs); } ._readyBadge_1g925_2673 { width: fit-content; display: inline-flex; align-items: center; gap: 5px; padding: 4px 8px; border-radius: var(--radius-full); color: var(--color-success) !important; background: color-mix(in srgb, var(--color-success) 10%, var(--color-white)); font-size: var(--font-size-xs); font-weight: var(--font-weight-medium); } /* ====================================================== POST SETTINGS ====================================================== */ ._settingsGrid_1g925_2721 { display: grid; grid-template-columns: 1.2fr 0.9fr 0.8fr; align-items: stretch; padding: 0 var(--space-4) var(--space-4); } ._settingItem_1g925_2741 { min-width: 0; display: flex; align-items: flex-start; gap: var(--space-2); padding: 0 var(--space-3); border-right: 1px solid var(--border-light); } ._settingItem_1g925_2741:first-child { padding-left: 0; } ._settingItem_1g925_2741:last-child { padding-right: 0; border-right: 0; } ._settingItem_1g925_2741>svg { margin-top: 2px; flex-shrink: 0; color: var(--text-primary-dark); } ._settingItem_1g925_2741 span, ._settingItem_1g925_2741 strong { display: block; } ._settingItem_1g925_2741 span { color: var(--text-secondary); font-size: var(--font-size-xs); } ._settingItem_1g925_2741 strong { margin-top: 4px; color: var(--text-primary-dark); font-size: var(--font-size-xs); line-height: 1.45; } /* ====================================================== DETAILS TAB ====================================================== */ ._detailsTab_1g925_2853 { width: 100%; min-width: 0; } /* ====================================================== TOP METRICS ====================================================== */ ._detailsMetricGrid_1g925_2871 { display: grid; grid-template-columns: repeat(5, minmax(0, 1fr)); gap: 12px; margin-bottom: var(--space-4); } ._metricCard_1g925_2885 { min-width: 0; min-height: 96px; display: flex; align-items: center; gap: var(--space-3); padding: 14px 16px; } ._metricIcon_1g925_2907 { width: 48px; height: 48px; flex-shrink: 0; display: inline-flex; align-items: center; justify-content: center; border-radius: var(--radius-full); font-size: var(--font-size-xl); } ._metricBlue_1g925_2933 { color: var(--color-primary); background: color-mix(in srgb, var(--color-primary) 10%, var(--color-white)); } ._metricGreen_1g925_2943 { color: var(--color-success); background: color-mix(in srgb, var(--color-success) 10%, var(--color-white)); } ._metricPurple_1g925_2953 { color: #9333ea; background: color-mix(in srgb, #9333ea 10%, var(--color-white)); } ._metricOrange_1g925_2963 { color: var(--color-warning); background: color-mix(in srgb, var(--color-warning) 12%, var(--color-white)); } ._metricCopy_1g925_2973 { min-width: 0; } ._metricCopy_1g925_2973>span { display: block; color: var(--text-secondary); font-size: var(--font-size-xs); font-weight: var(--font-weight-medium); } ._metricCopy_1g925_2973>strong { display: block; margin-top: 5px; color: var(--text-primary-dark); font-size: var(--font-size-xl); font-weight: var(--font-weight-bold); line-height: 1.15; } ._metricUnavailable_1g925_3025 { font-size: var(--font-size-lg) !important; white-space: nowrap; } ._aiMetricValue_1g925_3035 { margin-top: 5px; display: flex; align-items: center; flex-wrap: wrap; gap: 5px; } ._aiMetricValue_1g925_3035>strong { color: var(--text-primary-dark); font-size: var(--font-size-xl); font-weight: var(--font-weight-bold); line-height: 1; } ._aiMetricValue_1g925_3035>small { color: var(--text-secondary); font-size: var(--font-size-xs); } ._aiMetricValue_1g925_3035 ._goodBadge_1g925_2467 { margin-left: 4px; } /* ====================================================== DETAILS DASHBOARD LAYOUT ====================================================== */ ._detailsDashboardGrid_1g925_3099 { width: 100%; display: grid; grid-template-columns: minmax(0, 1.68fr) minmax(360px, 0.92fr); gap: var(--space-4); align-items: start; } ._detailsDashboardLeft_1g925_3121, ._detailsDashboardRight_1g925_3123 { min-width: 0; display: flex; flex-direction: column; gap: var(--space-4); } ._detailsPanel_1g925_3141 { min-width: 0; overflow: hidden; } ._detailsPanelHeader_1g925_3151 { padding: 14px 16px 10px; } ._detailsPanelHeader_1g925_3151 h3 { margin: 0; color: var(--text-primary-dark); font-size: var(--font-size-lg); font-weight: var(--font-weight-bold); } /* ====================================================== CONTENT + MEDIA ====================================================== */ ._contentBadges_1g925_3185 { display: flex; align-items: center; flex-wrap: wrap; gap: 8px; padding: 0 16px 12px; } ._aiGeneratedBadge_1g925_3205, ._mediaProvidedBadge_1g925_3207, ._aspectBadge_1g925_3209 { min-height: 26px; display: inline-flex; align-items: center; gap: 6px; padding: 4px 9px; border-radius: var(--radius-md); font-size: var(--font-size-xs); font-weight: var(--font-weight-medium); } ._aiGeneratedBadge_1g925_3205 { color: #7c3aed; background: #f3e8ff; } ._mediaProvidedBadge_1g925_3207 { color: var(--color-primary); background: color-mix(in srgb, var(--color-primary) 10%, var(--color-white)); } ._aspectBadge_1g925_3209 { color: var(--text-secondary); background: var(--color-bg-light); } ._contentMediaBody_1g925_3271 { display: grid; grid-template-columns: minmax(0, 1fr) 235px; gap: 22px; padding: 0 16px 18px; } ._contentInfo_1g925_3289 { min-width: 0; display: flex; flex-direction: column; gap: 14px; } ._contentInfoRow_1g925_3307 { display: grid; grid-template-columns: 82px minmax(0, 1fr); gap: 12px; align-items: start; } ._contentInfoRow_1g925_3307>span { color: var(--text-secondary); font-size: var(--font-size-sm); } ._contentInfoRow_1g925_3307>strong, ._contentInfoRow_1g925_3307>p { margin: 0; color: var(--text-primary-dark); font-size: var(--font-size-sm); } ._contentInfoRow_1g925_3307>strong { font-weight: var(--font-weight-medium); } ._contentInfoRow_1g925_3307>p { line-height: 1.65; } ._detailsHashtags_1g925_3371 { display: flex; align-items: center; flex-wrap: wrap; gap: 6px; } ._detailsHashtags_1g925_3371>span:not(._emptyValue_1g925_3387) { padding: 5px 10px; border-radius: var(--radius-full); color: var(--text-secondary); background: var(--color-bg-light); font-size: var(--font-size-xs); } ._emptyValue_1g925_3387 { color: var(--text-muted); font-size: var(--font-size-xs); } ._detailsMediaPreview_1g925_3421 { min-width: 0; display: flex; flex-direction: column; align-items: center; gap: 8px; } ._detailsMediaVideo_1g925_3443, ._detailsMediaImage_1g925_3445, ._detailsMediaEmpty_1g925_3447 { width: 100%; height: 190px; display: block; overflow: hidden; border: 1px solid var(--border-light); border-radius: var(--radius-md); background: #0f172a; } ._detailsMediaVideo_1g925_3443 { object-fit: cover; } ._detailsMediaImage_1g925_3445 { object-fit: contain; background: var(--color-white); } ._detailsMediaEmpty_1g925_3447 { display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 8px; color: var(--text-muted); background: var(--color-bg-light); } ._detailsMediaEmpty_1g925_3447 svg { font-size: 28px; } ._detailsMediaType_1g925_3529 { color: var(--text-primary-dark); font-size: var(--font-size-xs); font-weight: var(--font-weight-medium); } ._detailsMediaPreview_1g925_3421 ._app-btn_1g925_203 { min-height: 34px; padding: 0 14px; font-size: var(--font-size-xs); } ._contentMetaGrid_1g925_3559 { margin: 0 16px 16px; padding-top: 14px; display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 16px; border-top: 1px solid var(--border-light); } ._contentMetaGrid_1g925_3559>div { min-width: 0; } ._contentMetaGrid_1g925_3559 span, ._contentMetaGrid_1g925_3559 strong { display: block; } ._contentMetaGrid_1g925_3559 span { color: var(--text-secondary); font-size: var(--font-size-xs); } ._contentMetaGrid_1g925_3559 strong { margin-top: 5px; overflow-wrap: anywhere; color: var(--text-primary-dark); font-size: var(--font-size-sm); font-weight: var(--font-weight-medium); } /* ====================================================== PUBLISHING CONFIGURATION ====================================================== */ ._publishingConfigGrid_1g925_3645 { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); column-gap: 36px; row-gap: 8px; padding: 2px 16px 18px; } ._publishingConfigColumn_1g925_3665 { min-width: 0; display: flex; flex-direction: column; gap: 10px; } ._configRow_1g925_3683 { min-width: 0; display: grid; grid-template-columns: 105px minmax(0, 1fr); gap: 12px; align-items: center; } ._configRow_1g925_3683>span { color: var(--text-secondary); font-size: var(--font-size-xs); } ._configRow_1g925_3683>strong { min-width: 0; overflow-wrap: anywhere; color: var(--text-primary-dark); font-size: var(--font-size-xs); font-weight: var(--font-weight-medium); } ._configPostIdValue_1g925_3739, ._configSuccessValue_1g925_3741, ._configErrorValue_1g925_3743 { display: inline-flex; align-items: center; gap: 6px; } ._configPostIdValue_1g925_3739 button { width: 24px; height: 24px; flex-shrink: 0; display: inline-flex; align-items: center; justify-content: center; padding: 0; border: 0; border-radius: var(--radius-sm); background: transparent; color: var(--text-secondary); cursor: pointer; } ._configPostIdValue_1g925_3739 button:hover { color: var(--color-primary); background: var(--brand-soft); } ._configSuccessValue_1g925_3741 { color: var(--color-success) !important; } ._configErrorValue_1g925_3743 { color: var(--color-danger) !important; } /* ====================================================== PLATFORM PUBLISHING DETAILS ====================================================== */ ._detailPlatformTableWrap_1g925_3833 { margin: 0 16px; overflow-x: auto; border: 1px solid var(--border-light); border-radius: var(--radius-md); } ._detailPlatformTable_1g925_3833 { width: 100%; min-width: 900px; border-collapse: collapse; } ._detailPlatformTable_1g925_3833 th, ._detailPlatformTable_1g925_3833 td { padding: 10px 10px; text-align: left; vertical-align: middle; border-bottom: 1px solid var(--border-light); } ._detailPlatformTable_1g925_3833 tbody tr:last-child td { border-bottom: 0; } ._detailPlatformTable_1g925_3833 th { color: var(--text-secondary); background: var(--color-bg-light); font-size: 11px; font-weight: var(--font-weight-medium); white-space: nowrap; } ._detailPlatformTable_1g925_3833 td { color: var(--text-primary-dark); font-size: 11px; } ._detailPlatformName_1g925_3925 { display: inline-flex; align-items: center; gap: 7px; white-space: nowrap; } ._detailStatus_1g925_3943 { display: inline-flex; align-items: center; gap: 6px; white-space: nowrap; } ._detailStatus_1g925_3943 i { width: 7px; height: 7px; display: inline-block; border-radius: var(--radius-full); background: var(--text-muted); } ._detailStatusPublished_1g925_3983 { color: var(--text-primary-dark); } ._detailStatusPublished_1g925_3983 i { background: var(--color-success); } ._platformPostIdCell_1g925_3999 { display: inline-block; max-width: 130px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; } ._platformMetrics_1g925_4021 { display: grid; grid-template-columns: repeat(5, auto); gap: 10px; } ._platformMetrics_1g925_4021>span { min-width: 30px; } ._platformMetrics_1g925_4021 small, ._platformMetrics_1g925_4021 strong { display: block; text-align: center; } ._platformMetrics_1g925_4021 small { color: var(--text-secondary); font-size: 10px; } ._platformMetrics_1g925_4021 strong { margin-top: 2px; color: var(--text-primary-dark); font-size: 11px; font-weight: var(--font-weight-semibold); } ._detailPlatformTable_1g925_3833 ._app-btn_1g925_203 { min-height: 32px; padding: 0 12px; font-size: 11px; white-space: nowrap; } ._metricsNotice_1g925_4107 { margin: 12px 16px 16px; min-height: 40px; display: flex; align-items: center; gap: 8px; padding: 8px 12px; border: 1px solid color-mix(in srgb, var(--color-primary) 18%, var(--border-light)); border-radius: var(--radius-md); color: var(--text-secondary); background: var(--brand-soft); font-size: var(--font-size-xs); } ._metricsNotice_1g925_4107 svg { flex-shrink: 0; color: var(--color-primary); } /* ====================================================== AI CONTENT REVIEW ====================================================== */ ._aiReviewOverview_1g925_4169 { display: grid; grid-template-columns: 110px minmax(0, 1fr); align-items: center; gap: 18px; padding: 0 16px 14px; } ._aiScoreRing_1g925_4191 { width: 96px; height: 96px; display: flex; flex-direction: column; align-items: center; justify-content: center; border: 7px solid color-mix(in srgb, var(--color-primary) 18%, var(--border-light)); border-top-color: var(--color-primary); border-right-color: var(--color-primary); border-radius: var(--radius-full); } ._aiScoreRing_1g925_4191 strong { color: var(--text-primary-dark); font-size: 30px; font-weight: var(--font-weight-bold); line-height: 1; } ._aiScoreRing_1g925_4191 span { margin-top: 5px; color: var(--text-secondary); font-size: var(--font-size-xs); } ._aiReviewMeta_1g925_4259 { min-width: 0; } ._aiReviewMeta_1g925_4259 p { margin: 7px 0 0; color: var(--text-secondary); font-size: var(--font-size-xs); line-height: 1.45; } ._aiReviewSection_1g925_4285 { padding: 0 16px; margin-top: 14px; } ._aiReviewSection_1g925_4285 h4 { margin: 0 0 10px; color: var(--text-primary-dark); font-size: var(--font-size-sm); font-weight: var(--font-weight-semibold); } ._aiStrengthList_1g925_4315, ._aiImprovementList_1g925_4317 { display: flex; flex-direction: column; gap: 9px; } ._aiStrengthList_1g925_4315>div { display: flex; align-items: flex-start; gap: 8px; color: var(--text-primary-dark); font-size: var(--font-size-xs); line-height: 1.45; } ._aiStrengthList_1g925_4315 svg { margin-top: 1px; flex-shrink: 0; color: var(--color-success); } ._aiImprovementList_1g925_4317>div { display: grid; grid-template-columns: 24px minmax(0, 1fr); align-items: flex-start; gap: 8px; } ._aiImprovementList_1g925_4317>div>span { width: 24px; height: 24px; display: inline-flex; align-items: center; justify-content: center; border-radius: var(--radius-sm); color: var(--text-secondary); background: var(--color-bg-light); font-size: var(--font-size-xs); } ._aiImprovementList_1g925_4317 p { margin: 2px 0 0; color: var(--text-primary-dark); font-size: var(--font-size-xs); line-height: 1.45; } ._emptyReviewText_1g925_4439 { margin: 0; color: var(--text-muted); font-size: var(--font-size-xs); } ._aiChecksBanner_1g925_4455 { min-height: 40px; margin: 16px; margin-top: 18px; display: flex; align-items: center; justify-content: space-between; gap: 10px; padding: 8px 12px; border-radius: var(--radius-md); color: var(--color-success); background: color-mix(in srgb, var(--color-success) 9%, var(--color-white)); font-size: var(--font-size-xs); } ._aiChecksBanner_1g925_4455>span { display: inline-flex; align-items: center; gap: 7px; font-weight: var(--font-weight-medium); } ._aiChecksBanner_1g925_4455 small { color: var(--text-secondary); } ._aiChecksBannerWarning_1g925_4525 { color: var(--color-warning); background: color-mix(in srgb, var(--color-warning) 10%, var(--color-white)); } /* ====================================================== PUBLISHING HEALTH ====================================================== */ ._healthSummaryRow_1g925_4543 { display: flex; align-items: center; justify-content: space-between; gap: 12px; padding: 0 16px 8px; } ._healthSummaryRow_1g925_4543 strong { color: var(--text-primary-dark); font-size: var(--font-size-sm); } ._healthProgress_1g925_4575 { height: 6px; margin: 0 16px 12px; overflow: hidden; border-radius: var(--radius-full); background: color-mix(in srgb, var(--color-success) 14%, var(--color-white)); } ._healthProgress_1g925_4575>span { height: 100%; display: block; border-radius: inherit; background: var(--color-success); } ._healthPlatformList_1g925_4619 { display: flex; flex-direction: column; padding: 0 16px; } ._healthPlatformRow_1g925_4633 { min-height: 42px; display: grid; grid-template-columns: minmax(145px, 1.2fr) minmax(90px, 0.8fr) auto auto; align-items: center; gap: 8px; border-bottom: 1px solid var(--border-light); color: var(--text-secondary); font-size: 11px; } ._healthPlatformRow_1g925_4633:last-child { border-bottom: 0; } ._healthPlatformIdentity_1g925_4675 { min-width: 0; display: inline-flex; align-items: center; gap: 7px; color: var(--text-primary-dark); } ._healthPlatformIdentity_1g925_4675 ._platformIcon_1g925_695 { width: 26px; height: 26px; font-size: 11px; } ._healthStatus_1g925_4711 { display: inline-flex; align-items: center; gap: 6px; } ._healthStatus_1g925_4711 i { width: 7px; height: 7px; display: inline-block; border-radius: var(--radius-full); background: var(--text-muted); } ._healthStatusSuccess_1g925_4747 i { background: var(--color-success); } ._healthPlatformRow_1g925_4633>span:last-child strong { color: var(--color-success); } ._healthInfoBanner_1g925_4763 { min-height: 40px; margin: 12px 16px 16px; display: flex; align-items: center; gap: 8px; padding: 8px 12px; border-radius: var(--radius-md); color: var(--text-secondary); background: var(--brand-soft); font-size: var(--font-size-xs); } ._healthInfoBanner_1g925_4763 svg { flex-shrink: 0; color: var(--color-primary); } /* ====================================================== ACTIVITY TIMELINE ====================================================== */ ._activityTimeline_1g925_4823 { padding: 0 16px 16px; } ._activityTimelineItem_1g925_4831 { min-height: 30px; display: grid; grid-template-columns: 20px minmax(0, 1fr) auto; align-items: start; gap: 8px; position: relative; } ._activityTimelineRail_1g925_4857 { position: relative; min-height: 30px; display: flex; justify-content: center; } ._activityTimelineRail_1g925_4857>span { position: relative; z-index: 2; width: 10px; height: 10px; margin-top: 4px; display: block; border-radius: var(--radius-full); background: var(--color-success); } ._activityTimelineRail_1g925_4857>i { position: absolute; top: 13px; bottom: -6px; width: 2px; background: color-mix(in srgb, var(--color-success) 35%, var(--border-light)); } ._activityTimelineItem_1g925_4831>strong { color: var(--text-primary-dark); font-size: var(--font-size-xs); font-weight: var(--font-weight-medium); line-height: 1.45; } ._activityTimelineItem_1g925_4831>span { color: var(--text-secondary); font-size: 11px; white-space: nowrap; line-height: 1.45; } /* ====================================================== DETAILS RESPONSIVE ====================================================== */ @media (max-width: 1280px) { ._detailsMetricGrid_1g925_2871 { grid-template-columns: repeat(3, minmax(0, 1fr)); } ._detailsDashboardGrid_1g925_3099 { grid-template-columns: minmax(0, 1.5fr) minmax(330px, 0.9fr); } ._contentMediaBody_1g925_3271 { grid-template-columns: minmax(0, 1fr) 210px; } ._detailsMediaVideo_1g925_3443, ._detailsMediaImage_1g925_3445, ._detailsMediaEmpty_1g925_3447 { height: 170px; } ._healthPlatformRow_1g925_4633 { grid-template-columns: minmax(130px, 1fr) auto; } ._healthPlatformRow_1g925_4633>span:nth-child(3), ._healthPlatformRow_1g925_4633>span:nth-child(4) { padding-left: 33px; } } @media (max-width: 1080px) { ._detailsDashboardGrid_1g925_3099 { grid-template-columns: 1fr; } ._detailsDashboardRight_1g925_3123 { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); align-items: start; } ._detailsDashboardRight_1g925_3123> :last-child { grid-column: 1 / -1; } } @media (max-width: 760px) { ._detailsMetricGrid_1g925_2871 { grid-template-columns: 1fr; } ._contentMediaBody_1g925_3271, ._publishingConfigGrid_1g925_3645, ._detailsDashboardRight_1g925_3123 { grid-template-columns: 1fr; } ._contentInfoRow_1g925_3307, ._configRow_1g925_3683 { grid-template-columns: 1fr; gap: 4px; } ._contentMetaGrid_1g925_3559 { grid-template-columns: repeat(2, minmax(0, 1fr)); } ._detailsDashboardRight_1g925_3123> :last-child { grid-column: auto; } ._activityTimelineItem_1g925_4831 { grid-template-columns: 20px minmax(0, 1fr); } ._activityTimelineItem_1g925_4831>span { grid-column: 2; white-space: normal; } } /* ====================================================== ONLY PUBLISH BUTTON SPINNER ANIMATION ====================================================== */ @keyframes _publishSpin_1g925_229 { to { transform: rotate(360deg); } } /* ====================================================== TABLET ====================================================== */ @media (max-width: 1100px) { ._mainGrid_1g925_377 { grid-template-columns: 1fr; } ._rightColumn_1g925_1861 { height: auto; grid-template-columns: repeat(2, minmax(0, 1fr)); grid-template-rows: auto; } } /* ====================================================== MOBILE ====================================================== */ @media (max-width: 760px) { ._page_1g925_1 { padding-top: var(--space-3); padding-bottom: var(--space-4); } ._header_1g925_31 { flex-direction: column; } ._headerActions_1g925_181 { width: 100%; display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); } ._headerActions_1g925_181>button { width: 100%; } ._headerActions_1g925_181 ._moreButton_1g925_209 { width: 100% !important; } ._tabs_1g925_263 { gap: var(--space-3); overflow-x: auto; } ._platformNavigation_1g925_505 { grid-template-columns: 1fr; } ._arrowButton_1g925_529 { display: none !important; } ._platformTabs_1g925_549 { grid-template-columns: 1fr; } ._socialPost_1g925_811 { width: calc(100% - 28px); } ._previewMeta_1g925_1773 { grid-template-columns: 1fr; padding-block: var(--space-2); } ._previewMeta_1g925_1773>span { text-align: left; } ._rightColumn_1g925_1861 { grid-template-columns: 1fr; } ._settingsGrid_1g925_2721 { grid-template-columns: 1fr; } ._settingItem_1g925_2741 { padding: var(--space-3) 0; border-right: 0; border-bottom: 1px solid var(--border-light); } ._settingItem_1g925_2741:last-child { border-bottom: 0; } } /* ====================================================== SMALL MOBILE ====================================================== */ @media (max-width: 520px) { ._titleRow_1g925_63 h1 { font-size: var(--font-size-xl); } ._headerActions_1g925_181 { grid-template-columns: 1fr; } ._platformTab_1g925_549 { grid-template-columns: auto minmax(0, 1fr); } ._acceptedBadge_1g925_759 { grid-column: 1 / -1; justify-self: start; } ._reviewContent_1g925_2367, ._mediaContent_1g925_2527 { grid-template-columns: 1fr; } ._scoreRing_1g925_2391 { margin-inline: auto; } ._mediaImageSmall_1g925_2547, ._mediaArtworkSmall_1g925_2549 { width: 100%; } ._mediaArtwork_1g925_1087 { aspect-ratio: 1.35 / 1; } ._artTitle_1g925_1119 strong { font-size: calc(var(--font-size-2xl) * 1.3); } } /* ====================================================== POST STATUS TAB ====================================================== */ ._postStatusTab_1g925_5465 { width: 100%; min-width: 0; } ._statusHero_1g925_5475 { min-height: 92px; display: grid; grid-template-columns: auto minmax(220px, 1fr) auto auto; align-items: center; gap: var(--space-4); margin-bottom: var(--space-4); padding: var(--space-4) var(--space-5); border: 1px solid color-mix(in srgb, var(--color-success) 35%, var(--border-light)); border-radius: var(--radius-lg); background: color-mix(in srgb, var(--color-success) 4%, var(--color-white)); } ._statusHeroIcon_1g925_5511 { width: 56px; height: 56px; display: inline-flex; align-items: center; justify-content: center; flex-shrink: 0; border: 5px solid var(--color-success); border-radius: var(--radius-full); color: var(--color-success); font-size: var(--font-size-2xl); } ._statusHeroCopy_1g925_5547 h2 { margin: 0; color: var(--text-primary-dark); font-size: var(--font-size-xl); font-weight: var(--font-weight-bold); } ._statusHeroCopy_1g925_5547 p { margin: 5px 0 0; color: var(--text-secondary); font-size: var(--font-size-sm); } ._statusHeroChips_1g925_5581 { display: flex; align-items: center; flex-wrap: wrap; gap: var(--space-2); } ._statusHeroChips_1g925_5581 span { min-height: 32px; display: inline-flex; align-items: center; gap: 6px; padding: 0 10px; border: 1px solid var(--border-light); border-radius: var(--radius-md); background: var(--color-white); color: var(--text-primary-dark); font-size: var(--font-size-xs); } ._statusHeroChips_1g925_5581 span:last-child svg { color: var(--color-success); } ._statusHeroTime_1g925_5645 { color: var(--text-secondary); font-size: var(--font-size-xs); white-space: nowrap; } ._postStatusGrid_1g925_5661 { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: var(--space-4); align-items: start; } ._postStatusCardHeader_1g925_5679 { padding: var(--space-4); padding-bottom: var(--space-3); } ._postStatusCardHeader_1g925_5679 h3 { margin: 0; color: var(--text-primary-dark); font-size: var(--font-size-lg); font-weight: var(--font-weight-bold); } /* ====================================================== TIMELINE ====================================================== */ ._timelineCard_1g925_5715 { min-height: auto; height: auto; } ._timelineList_1g925_5725 { display: flex; flex-direction: column; padding: 0 var(--space-4) var(--space-4); } ._timelineItem_1g925_5739 { min-height: 62px; display: grid; grid-template-columns: 24px 42px minmax(0, 1fr) auto; align-items: center; gap: var(--space-3); } ._timelineRail_1g925_5759 { position: relative; align-self: stretch; display: flex; justify-content: center; } ._timelineDot_1g925_5777 { position: relative; z-index: 2; width: 15px; height: 15px; margin-top: 23px; display: inline-flex; align-items: center; justify-content: center; border: 2px solid var(--text-secondary); border-radius: var(--radius-full); background: var(--color-white); color: var(--color-success); font-size: 10px; } ._timelineDotDone_1g925_5823 { width: 17px; height: 17px; border-color: var(--color-success); background: color-mix(in srgb, var(--color-success) 10%, var(--color-white)); } ._timelineLine_1g925_5839 { position: absolute; top: 38px; bottom: -24px; width: 1px; background: var(--border-default); } ._timelineMainIcon_1g925_5861 { width: 40px; height: 40px; display: inline-flex; align-items: center; justify-content: center; border-radius: var(--radius-full); background: var(--color-bg-light); color: var(--text-secondary); font-size: var(--font-size-lg); } ._timelineAiIcon_1g925_5893 { color: var(--color-primary); background: var(--brand-soft); } ._timelineCopy_1g925_5903 strong, ._timelineCopy_1g925_5903 span { display: block; } ._timelineCopy_1g925_5903 strong { color: var(--text-primary-dark); font-size: var(--font-size-sm); font-weight: var(--font-weight-semibold); } ._timelineCopy_1g925_5903 span { margin-top: 4px; color: var(--text-secondary); font-size: var(--font-size-xs); } ._timelineNote_1g925_5943 { color: var(--text-secondary); font-size: var(--font-size-xs); text-align: right; } ._timelineNoteSuccess_1g925_5959 { color: var(--color-success); } /* ====================================================== PLATFORM STATUS ====================================================== */ ._platformStatusList_1g925_5975 { display: flex; flex-direction: column; gap: var(--space-3); padding: 0 var(--space-4) var(--space-4); } ._platformStatusItem_1g925_5993 { padding: var(--space-3); border: 1px solid var(--border-light); border-radius: var(--radius-md); background: var(--color-white); } ._platformStatusHeader_1g925_6011 { display: flex; align-items: center; justify-content: space-between; gap: var(--space-3); } ._platformStatusTitle_1g925_6027 { display: inline-flex; align-items: center; gap: var(--space-2); } ._platformStatusTitle_1g925_6027 strong { color: var(--text-primary-dark); font-size: var(--font-size-sm); font-weight: var(--font-weight-semibold); } ._platformPublishedBadge_1g925_6055, ._providedBadge_1g925_6057 { display: inline-flex; align-items: center; width: fit-content; padding: 5px 10px; border-radius: var(--radius-md); color: var(--color-success); background: color-mix(in srgb, var(--color-success) 10%, var(--color-white)); font-size: var(--font-size-xs); font-weight: var(--font-weight-medium); } ._platformStatusDetails_1g925_6091 { display: grid; grid-template-columns: minmax(180px, 1.45fr) minmax(140px, 1fr) 70px 70px; gap: var(--space-3); margin-top: var(--space-3); } ._platformStatusDetails_1g925_6091 span, ._platformStatusDetails_1g925_6091 strong { display: block; } ._platformStatusDetails_1g925_6091 span { color: var(--text-secondary); font-size: var(--font-size-xs); } ._platformStatusDetails_1g925_6091 strong { margin-top: 5px; color: var(--text-primary-dark); font-size: var(--font-size-xs); font-weight: var(--font-weight-medium); line-height: 1.45; } ._platformPostId_1g925_3999 { display: flex !important; align-items: center; gap: 6px; overflow-wrap: anywhere; } ._platformPostId_1g925_3999 button, ._configPostId_1g925_3739 button { width: 24px; height: 24px; flex-shrink: 0; display: inline-flex; align-items: center; justify-content: center; border: 0; border-radius: var(--radius-md); background: transparent; color: var(--text-secondary); cursor: pointer; } ._platformPostId_1g925_3999 button:hover, ._configPostId_1g925_3739 button:hover { background: var(--color-bg-light); color: var(--color-primary); } ._platformStatusAction_1g925_6223 { margin-top: var(--space-3); display: flex; justify-content: flex-end; } /* ====================================================== PUBLISHED CONTENT ====================================================== */ ._publishedContentBody_1g925_6245 { display: grid; grid-template-columns: 150px minmax(0, 1fr) 150px; gap: var(--space-4); padding: 0 var(--space-4) var(--space-4); } ._publishedContentBody_1g925_6245 ._mediaArtworkSmall_1g925_2549, ._publishedContentBody_1g925_6245 ._mediaImageSmall_1g925_2547 { width: 150px; height: 150px; } ._publishedCaptionBlock_1g925_6275 { min-width: 0; } ._publishedInfoRow_1g925_6283 { display: grid; grid-template-columns: 92px minmax(0, 1fr); gap: var(--space-2); align-items: center; } ._publishedInfoRow_1g925_6283>span, ._publishedCaption_1g925_6275>span, ._publishedMediaMeta_1g925_6305 span { color: var(--text-secondary); font-size: var(--font-size-xs); } ._publishedCaption_1g925_6275 { margin-top: var(--space-3); } ._publishedCaption_1g925_6275 p { margin: 8px 0 0; color: var(--text-primary-dark); font-size: var(--font-size-xs); line-height: 1.55; } ._publishedHashtags_1g925_6343 { display: flex; flex-wrap: wrap; gap: var(--space-2); margin-top: var(--space-3); } ._publishedHashtags_1g925_6343 span { padding: 5px 9px; border: 1px solid color-mix(in srgb, var(--color-primary) 30%, var(--border-light)); border-radius: var(--radius-md); color: var(--color-primary); background: var(--brand-soft); font-size: var(--font-size-xs); } ._publishedCaptionBlock_1g925_6275 small { display: block; margin-top: var(--space-3); color: var(--text-secondary); font-size: var(--font-size-xs); } ._publishedMediaMeta_1g925_6305 { grid-column: 1 / -1; display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: var(--space-4); padding: var(--space-3) 0 0; border-left: 0; border-top: 1px solid var(--border-light); } ._publishedMediaMeta_1g925_6305 strong { display: block; margin-top: 4px; color: var(--text-primary-dark); font-size: var(--font-size-xs); font-weight: var(--font-weight-medium); } /* ====================================================== CONFIGURATION ====================================================== */ ._configurationBody_1g925_6463 { display: grid; grid-template-columns: minmax(0, 1fr) 1px minmax(0, 1.2fr); gap: var(--space-4); padding: 0 var(--space-4); } ._configurationColumn_1g925_6481 { display: flex; flex-direction: column; gap: var(--space-3); } ._configurationColumn_1g925_6481>div { display: grid; grid-template-columns: 96px minmax(0, 1fr); gap: var(--space-2); } ._configurationColumn_1g925_6481 span { color: var(--text-secondary); font-size: var(--font-size-xs); } ._configurationColumn_1g925_6481 strong { color: var(--text-primary-dark); font-size: var(--font-size-sm); font-weight: var(--font-weight-medium); overflow-wrap: anywhere; } ._configurationDivider_1g925_6539 { width: 1px; background: var(--border-light); } ._configurationOn_1g925_6551, ._configPostId_1g925_3739 { display: inline-flex; align-items: center; gap: 6px; } ._configurationOn_1g925_6551 svg { color: var(--color-success); } ._configUpdated_1g925_6575 { margin: var(--space-4); margin-top: var(--space-5); color: var(--text-muted); font-size: var(--font-size-xs); } /* ====================================================== COMMENTS TAB ====================================================== */ ._commentsTab_1g925_6601 { width: 100%; min-width: 0; } ._commentsSummaryGrid_1g925_6611 { display: grid; grid-template-columns: repeat(7, minmax(0, 1fr)); gap: var(--space-3); margin-bottom: var(--space-4); } ._commentSummaryCard_1g925_6629 { min-height: 92px; display: flex; align-items: center; gap: var(--space-3); padding: var(--space-3); } ._commentSummaryIcon_1g925_6651 { width: 42px; height: 42px; flex-shrink: 0; display: inline-flex; align-items: center; justify-content: center; border-radius: var(--radius-full); font-size: var(--font-size-lg); } ._commentBlue_1g925_6681 { color: var(--color-primary); background: var(--brand-soft); } ._commentOrange_1g925_6691 { color: var(--color-warning); background: color-mix(in srgb, var(--color-warning) 10%, var(--color-white)); } ._commentPurple_1g925_6701 { color: #9333ea; background: color-mix(in srgb, #9333ea 9%, var(--color-white)); } ._commentRed_1g925_6711 { color: var(--color-danger); background: color-mix(in srgb, var(--color-danger) 9%, var(--color-white)); } ._commentTeal_1g925_6721 { color: #0ea5a6; background: color-mix(in srgb, #0ea5a6 9%, var(--color-white)); } ._commentGreen_1g925_6731 { color: var(--color-success); background: color-mix(in srgb, var(--color-success) 10%, var(--color-white)); } ._commentSummaryCard_1g925_6629>div>span, ._commentSummaryCard_1g925_6629>div>strong { display: block; } ._commentSummaryCard_1g925_6629>div>span { color: var(--text-secondary); font-size: var(--font-size-xs); } ._commentSummaryCard_1g925_6629>div>strong { margin-top: 5px; color: var(--text-primary-dark); font-size: var(--font-size-xl); font-weight: var(--font-weight-medium); } ._commentsCard_1g925_6781 { padding: var(--space-4); } ._commentsHeader_1g925_6789 { display: flex; align-items: flex-start; justify-content: space-between; gap: var(--space-4); margin-bottom: var(--space-4); } ._commentsHeader_1g925_6789 h2 { margin: 0; color: var(--text-primary-dark); font-size: var(--font-size-lg); font-weight: var(--font-weight-bold); } ._commentsHeader_1g925_6789 p { margin: 4px 0 0; color: var(--text-secondary); font-size: var(--font-size-xs); } ._commentsSyncArea_1g925_6843 { display: flex; align-items: center; gap: var(--space-3); } ._commentsSyncArea_1g925_6843>span { color: var(--text-secondary); font-size: var(--font-size-xs); white-space: nowrap; } ._commentsFilters_1g925_6873 { display: grid; grid-template-columns: minmax(240px, 1.35fr) repeat(3, minmax(135px, 0.72fr)) auto minmax(130px, 0.7fr); gap: var(--space-3); margin-bottom: var(--space-4); } ._commentSearch_1g925_6893, ._commentSelect_1g925_6895 { height: 38px; display: flex; align-items: center; gap: var(--space-2); padding: 0 var(--space-3); border: 1px solid var(--border-light); border-radius: var(--radius-md); background: var(--color-white); } ._commentSearch_1g925_6893 svg, ._commentSelect_1g925_6895>svg { flex-shrink: 0; color: var(--text-muted); } ._commentSearch_1g925_6893 input, ._commentSelect_1g925_6895 select { width: 100%; min-width: 0; border: 0; outline: 0; background: transparent; color: var(--text-primary-dark); font-family: inherit; font-size: var(--font-size-xs); } ._commentSearch_1g925_6893 input::placeholder { color: var(--text-muted); } ._commentSelect_1g925_6895 { position: relative; } ._commentSelect_1g925_6895 select { appearance: none; cursor: pointer; } ._commentSelect_1g925_6895>svg { pointer-events: none; } ._aiCommentControl_1g925_7009 { height: 38px; display: inline-flex; align-items: center; gap: var(--space-2); white-space: nowrap; } ._aiCommentLabelButton_1g925_7031 { display: inline-flex; align-items: center; gap: 6px; padding: 0; border: 0; background: transparent; color: var(--text-primary-dark); font-family: inherit; font-size: var(--font-size-xs); font-weight: var(--font-weight-medium); cursor: pointer; } ._aiCommentLabelButton_1g925_7031 small { padding: 2px 6px; border-radius: var(--radius-full); background: var(--brand-soft); color: var(--color-primary); font-size: var(--font-size-xs); font-weight: var(--font-weight-semibold); } ._aiCommentLabelButton_1g925_7031:disabled { opacity: 0.6; cursor: not-allowed; } ._aiCommentInlineStatus_1g925_7105 { display: flex; align-items: center; gap: var(--space-2); margin-top: var(--space-2); color: var(--color-success); font-size: var(--font-size-xs); } ._needsHumanToggle_1g925_7131 { height: 38px; display: inline-flex; align-items: center; gap: var(--space-2); color: var(--text-primary-dark); font-size: var(--font-size-xs); white-space: nowrap; } ._toggleTrack_1g925_7161 { position: relative; width: 36px; height: 22px; display: inline-block; flex-shrink: 0; } ._toggleTrack_1g925_7161 input { position: absolute; opacity: 0; pointer-events: none; } ._toggleTrack_1g925_7161 i { position: absolute; inset: 0; border-radius: var(--radius-full); background: var(--border-medium); transition: background var(--transition-fast); } ._toggleTrack_1g925_7161 i::before { content: ""; position: absolute; top: 3px; left: 3px; width: 16px; height: 16px; border-radius: var(--radius-full); background: var(--color-white); box-shadow: var(--shadow-sm); transition: transform var(--transition-fast); } ._toggleTrack_1g925_7161 input:checked+i { background: var(--color-primary); } ._toggleTrack_1g925_7161 input:checked+i::before { transform: translateX(14px); } ._bulkSelect_1g925_7275 select:disabled { color: var(--text-muted); cursor: not-allowed; } /* ====================================================== COMMENTS TABLE ====================================================== */ ._commentsTableWrap_1g925_7293 { position: relative; min-height: 288px; overflow: visible; border: 1px solid var(--border-light); border-radius: var(--radius-md); } ._commentsTable_1g925_7293 { width: 100%; min-width: 1000px; border-collapse: collapse; } ._commentsTable_1g925_7293 th, ._commentsTable_1g925_7293 td { padding: 11px 12px; border-bottom: 1px solid var(--border-light); text-align: left; vertical-align: middle; } ._commentsTable_1g925_7293 th { color: var(--text-primary-dark); background: var(--color-white); font-size: var(--font-size-xs); font-weight: var(--font-weight-medium); } ._commentsTable_1g925_7293 td { color: var(--text-primary-dark); font-size: var(--font-size-xs); } ._commentsTable_1g925_7293 tbody tr:last-child td { border-bottom: 0; } ._commentCheckboxCell_1g925_7387 { width: 46px; text-align: center !important; } ._commentsTable_1g925_7293 input[type="checkbox"] { width: 16px; height: 16px; accent-color: var(--color-primary); } ._commentPersonCell_1g925_7413 { display: grid; grid-template-columns: 38px 130px minmax(220px, 1fr); align-items: center; gap: var(--space-3); } ._commentAvatar_1g925_7429 { width: 38px; height: 38px; display: inline-flex; align-items: center; justify-content: center; border-radius: var(--radius-full); font-size: var(--font-size-sm); font-weight: var(--font-weight-medium); } ._avatar1_1g925_7457 { color: #7c3aed; background: #f3e8ff; } ._avatar2_1g925_7467 { color: #0f766e; background: #e6fffb; } ._avatar3_1g925_7477 { color: #be185d; background: #fce7f3; } ._avatar4_1g925_7487 { color: #dc2626; background: #fee2e2; } ._avatar5_1g925_7497 { color: var(--color-primary); background: var(--brand-soft); } ._commentIdentity_1g925_7507 strong, ._commentIdentity_1g925_7507 span { display: block; } ._commentIdentity_1g925_7507 strong { color: var(--text-primary-dark); font-size: var(--font-size-xs); font-weight: var(--font-weight-medium); } ._commentIdentity_1g925_7507 span { margin-top: 3px; font-weight: var(--font-weight-medium); color: var(--text-secondary); font-size: 11px; } ._commentPersonCell_1g925_7413 p { margin: 0; color: var(--text-primary-dark); font-size: var(--font-size-xs); line-height: 1.5; } ._commentPlatformCell_1g925_7565 { display: inline-flex; align-items: center; gap: var(--space-2); } ._sentimentBadge_1g925_7579, ._commentStatusBadge_1g925_7581 { display: inline-flex; align-items: center; justify-content: center; min-height: auto; padding: 2px 6px; border: 1px solid var(--border-light); border-radius: var(--radius-full); font-size: var(--font-size-xs); font-weight: var(--font-weight-semibold); line-height: 1.3; } ._sentimentPositive_1g925_7617 { color: var(--color-success); background: color-mix(in srgb, var(--color-success) 9%, var(--color-white)); border-color: color-mix(in srgb, var(--color-success) 22%, var(--border-light)); } ._sentimentNegative_1g925_7633 { color: var(--color-danger); background: color-mix(in srgb, var(--color-danger) 8%, var(--color-white)); border-color: color-mix(in srgb, var(--color-danger) 20%, var(--border-light)); } ._sentimentNeutral_1g925_7649 { color: var(--text-secondary); background: var(--color-bg-light); } ._commentStatusDraft_1g925_7659 { color: var(--color-primary); background: var(--brand-soft); border-color: color-mix(in srgb, var(--color-primary) 22%, var(--border-light)); } ._commentStatusSuccess_1g925_7675 { color: var(--color-success); background: color-mix(in srgb, var(--color-success) 9%, var(--color-white)); border-color: color-mix(in srgb, var(--color-success) 22%, var(--border-light)); } ._commentStatusWarning_1g925_7691 { color: var(--color-warning); background: color-mix(in srgb, var(--color-warning) 9%, var(--color-white)); border-color: color-mix(in srgb, var(--color-warning) 22%, var(--border-light)); } ._commentReceived_1g925_7707 { color: var(--text-secondary); white-space: nowrap; } ._commentActionGroup_1g925_7719 { display: flex; align-items: center; gap: 6px; } ._commentActionGroup_1g925_7719>button, ._commentMoreWrap_1g925_7735>button { width: 30px; height: 30px; display: inline-flex; align-items: center; justify-content: center; border: 0; border-radius: var(--radius-md); background: transparent; color: var(--text-secondary); cursor: pointer; } ._commentActionGroup_1g925_7719>button:hover, ._commentMoreWrap_1g925_7735>button:hover { background: var(--color-bg-light); color: var(--color-primary); } ._commentAiButton_1g925_7781 { color: #9333ea !important; } ._commentMoreWrap_1g925_7735 { position: relative; } ._commentMenu_1g925_7797 { position: absolute; top: calc(100% + 6px); right: 0; z-index: var(--z-dropdown); width: 160px; padding: 6px; border: 1px solid var(--border-light); border-radius: var(--radius-md); background: var(--color-white); box-shadow: var(--shadow-lg); } ._commentMenu_1g925_7797 button { width: 100%; min-height: 34px; display: flex; align-items: center; gap: var(--space-2); padding: 0 var(--space-2); border: 0; border-radius: var(--radius-sm); background: transparent; color: var(--text-primary-dark); font-family: inherit; font-size: var(--font-size-xs); cursor: pointer; } ._commentMenu_1g925_7797 button:hover { background: var(--color-bg-light); } ._commentDeleteAction_1g925_7891 { color: var(--color-danger) !important; } /* ====================================================== COMMENTS EMPTY STATE ====================================================== */ ._commentsEmptyState_1g925_7907 { min-height: 300px; display: flex; flex-direction: column; align-items: center; justify-content: center; padding: var(--space-5); text-align: center; } ._emptyCommentsArt_1g925_7933 { position: relative; width: 160px; height: 88px; margin-bottom: var(--space-3); } ._emptyBubbleOne_1g925_7951, ._emptyBubbleTwo_1g925_7953 { position: absolute; display: flex; align-items: center; justify-content: center; border: 1px solid color-mix(in srgb, var(--color-primary) 24%, var(--border-light)); border-radius: var(--radius-md); background: var(--brand-soft); color: var(--color-primary-light); } ._emptyBubbleOne_1g925_7951 { left: 18px; bottom: 4px; width: 88px; height: 50px; } ._emptyBubbleTwo_1g925_7953 { top: 0; right: 14px; width: 76px; height: 48px; } ._emptyLikeBubble_1g925_8013 { position: absolute; right: 12px; bottom: 0; width: 38px; height: 38px; display: inline-flex; align-items: center; justify-content: center; border-radius: var(--radius-full); background: var(--color-primary); color: var(--color-white); } ._emptyStarOne_1g925_8051, ._emptyStarTwo_1g925_8053 { position: absolute; color: var(--color-warning); font-style: normal; } ._emptyStarOne_1g925_8051 { left: 0; top: 17px; } ._emptyStarTwo_1g925_8053 { right: 0; top: 27px; } ._commentsEmptyState_1g925_7907 h3 { margin: 0; color: var(--text-primary-dark); font-size: var(--font-size-lg); font-weight: var(--font-weight-bold); } ._commentsEmptyState_1g925_7907 p { margin: 6px 0 0; color: var(--text-secondary); font-size: var(--font-size-xs); } ._emptyCommentActions_1g925_8123 { display: flex; align-items: center; gap: var(--space-2); margin-top: var(--space-3); } ._autoSyncText_1g925_8141 { display: inline-flex; align-items: center; gap: 6px; margin-top: var(--space-3); color: var(--text-secondary); font-size: var(--font-size-xs); } ._autoSyncText_1g925_8141 svg { color: var(--color-success); } /* ====================================================== COMMENT ACTIONS / PAGINATION ====================================================== */ ._commentActionsAvailable_1g925_8183, ._commentsPagination_1g925_8185 { margin-top: var(--space-3); padding: var(--space-3) var(--space-4); } ._commentActionsAvailable_1g925_8183 { display: flex; align-items: center; justify-content: space-between; gap: var(--space-4); } ._commentActionsAvailable_1g925_8183 h3 { margin: 0; color: var(--text-primary-dark); font-size: var(--font-size-sm); font-weight: var(--font-weight-semibold); } ._commentActionsAvailable_1g925_8183 p { margin: 4px 0 0; color: var(--text-secondary); font-size: var(--font-size-xs); } ._commentActionButtons_1g925_8247 { display: flex; align-items: center; flex-wrap: wrap; gap: var(--space-2); } ._commentsPagination_1g925_8185 { min-height: 58px; display: flex; align-items: center; justify-content: space-between; gap: var(--space-4); color: var(--text-secondary); font-size: var(--font-size-xs); } ._commentsPaginationControls_1g925_8291 { display: flex; align-items: center; gap: var(--space-3); } ._commentsPaginationControls_1g925_8291 select { min-width: 64px; height: 36px; padding: 0 var(--space-2); border: 1px solid var(--border-light); border-radius: var(--radius-md); background: var(--color-white); color: var(--text-primary-dark); font-family: inherit; font-size: var(--font-size-xs); } ._commentsPaginationControls_1g925_8291 strong { color: var(--text-primary-dark); font-size: var(--font-size-xs); font-weight: var(--font-weight-medium); } /* ====================================================== NEW TAB RESPONSIVE ====================================================== */ @media (max-width: 1250px) { ._statusHero_1g925_5475 { grid-template-columns: auto 1fr; } ._statusHeroChips_1g925_5581, ._statusHeroTime_1g925_5645 { grid-column: 2; } ._commentsSummaryGrid_1g925_6611 { grid-template-columns: repeat(4, minmax(0, 1fr)); } ._commentsFilters_1g925_6873 { grid-template-columns: repeat(3, minmax(0, 1fr)); } ._commentSearch_1g925_6893 { grid-column: span 2; } } @media (max-width: 980px) { ._postStatusGrid_1g925_5661 { grid-template-columns: 1fr; } ._commentsSummaryGrid_1g925_6611 { grid-template-columns: repeat(2, minmax(0, 1fr)); } ._commentsHeader_1g925_6789, ._commentActionsAvailable_1g925_8183, ._commentsPagination_1g925_8185 { align-items: flex-start; flex-direction: column; } ._commentsSyncArea_1g925_6843, ._commentsPaginationControls_1g925_8291 { width: 100%; flex-wrap: wrap; } ._commentsFilters_1g925_6873 { grid-template-columns: repeat(2, minmax(0, 1fr)); } ._commentSearch_1g925_6893 { grid-column: span 2; } ._commentsTableWrap_1g925_7293 { overflow-x: auto; } } @media (max-width: 760px) { ._page_1g925_1 { padding-left: var(--space-3); padding-right: var(--space-3); } ._statusHero_1g925_5475 { grid-template-columns: 1fr; } ._statusHeroChips_1g925_5581, ._statusHeroTime_1g925_5645 { grid-column: 1; } ._statusHeroIcon_1g925_5511 { width: 48px; height: 48px; } ._platformStatusDetails_1g925_6091, ._publishedContentBody_1g925_6245, ._configurationBody_1g925_6463 { grid-template-columns: 1fr; } ._publishedMediaMeta_1g925_6305 { padding-left: 0; padding-top: var(--space-3); border-left: 0; border-top: 1px solid var(--border-light); } ._configurationDivider_1g925_6539 { display: none; } ._commentsSummaryGrid_1g925_6611 { grid-template-columns: 1fr; } ._commentsFilters_1g925_6873 { grid-template-columns: 1fr; } ._commentSearch_1g925_6893 { grid-column: auto; } ._emptyCommentActions_1g925_8123, ._commentActionButtons_1g925_8247 { width: 100%; flex-direction: column; } ._emptyCommentActions_1g925_8123>button, ._commentActionButtons_1g925_8247>button { width: 100%; } } /* ====================================================== AI COMMENT SETTINGS ====================================================== */ ._aiCommentSettingsModal_1g925_8609 { width: min(650px, 100%); } ._aiCommentModalIcon_1g925_8617 { width: 42px; height: 42px; flex-shrink: 0; display: inline-flex; align-items: center; justify-content: center; border: 1px solid var(--border-light); border-radius: var(--radius-md); background: var(--brand-soft); color: var(--color-primary); font-size: var(--font-size-xl); } ._aiCommentEnableRow_1g925_8655 { min-height: 52px; display: flex; align-items: center; justify-content: space-between; gap: var(--space-4); padding: var(--space-3) var(--space-4); border: 1px solid var(--border-default); border-radius: var(--radius-md); background: var(--color-white); } ._aiCommentEnableCopy_1g925_8689 { min-width: 0; } ._aiCommentEnableCopy_1g925_8689 strong { color: var(--text-primary-dark); font-size: var(--font-size-sm); font-weight: var(--font-weight-semibold); } ._aiCommentModalSwitch_1g925_8711 { position: relative; flex-shrink: 0; cursor: pointer; } ._aiCommentModalSwitch_1g925_8711 input { position: absolute; opacity: 0; pointer-events: none; } ._aiCommentModalSwitchTrack_1g925_8741 { min-width: 66px; height: 32px; display: inline-flex; align-items: center; justify-content: flex-end; gap: 7px; padding: 3px 4px 3px 10px; border-radius: var(--radius-full); background: var(--border-medium); color: var(--color-white); transition: background var(--transition-fast); } ._aiCommentModalSwitchTrack_1g925_8741 b { font-size: var(--font-size-xs); font-weight: var(--font-weight-bold); } ._aiCommentModalSwitchTrack_1g925_8741 i { width: 24px; height: 24px; display: block; border-radius: var(--radius-full); background: var(--color-white); box-shadow: var(--shadow-sm); } ._aiCommentModalSwitch_1g925_8711 input:checked+._aiCommentModalSwitchTrack_1g925_8741 { background: var(--color-success); } ._aiCommentModalSwitch_1g925_8711 input:not(:checked)+._aiCommentModalSwitchTrack_1g925_8741 { flex-direction: row-reverse; padding-left: 4px; padding-right: 10px; } ._aiCommentModalSwitch_1g925_8711 input:disabled+._aiCommentModalSwitchTrack_1g925_8741 { opacity: 0.6; cursor: not-allowed; } ._aiCommentModeSection_1g925_8847 { margin-top: var(--space-4); } ._aiCommentSettingsModal_1g925_8609 ._replyModalBody_1g925_8855 { padding-top: var(--space-3); } ._aiCommentModeLabel_1g925_8863 { margin-bottom: var(--space-2); color: var(--text-primary-dark); font-size: var(--font-size-sm); font-weight: var(--font-weight-semibold); } ._aiCommentModeLabel_1g925_8863 b { color: var(--color-danger); } ._aiCommentModeCards_1g925_8889 { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: var(--space-3); } ._aiCommentModeCard_1g925_8889 { min-width: 0; min-height: 92px; display: flex; align-items: flex-start; gap: var(--space-3); padding: var(--space-4); border: 1px solid var(--border-default); border-radius: var(--radius-md); background: var(--color-white); color: var(--text-secondary); font-family: inherit; text-align: left; cursor: pointer; transition: border-color var(--transition-fast), background-color var(--transition-fast), box-shadow var(--transition-fast); } ._aiCommentModeCard_1g925_8889:hover:not(:disabled) { border-color: var(--border-medium); background: var(--color-bg-light); } ._aiCommentModeCardActive_1g925_8969 { border-color: var(--color-primary); background: var(--brand-soft); color: var(--color-primary); box-shadow: 0 0 0 1px var(--color-primary); } ._aiCommentModeCard_1g925_8889>svg { width: 22px; height: 22px; margin-top: 1px; flex-shrink: 0; } ._aiCommentModeCard_1g925_8889>span { min-width: 0; } ._aiCommentModeCard_1g925_8889 strong, ._aiCommentModeCard_1g925_8889 small { display: block; } ._aiCommentModeCard_1g925_8889 strong { color: var(--text-primary-dark); font-size: var(--font-size-md); font-weight: var(--font-weight-semibold); } ._aiCommentModeCard_1g925_8889 small { margin-top: 4px; color: var(--text-secondary); font-size: var(--font-size-xs); line-height: 1.45; } ._aiCommentModeCard_1g925_8889:disabled { opacity: 0.58; cursor: not-allowed; } ._aiCommentSettingsField_1g925_9065 { display: block; margin-top: var(--space-4); } ._aiCommentSettingsField_1g925_9065>span { display: block; margin-bottom: 7px; color: var(--text-primary-dark); font-size: var(--font-size-sm); font-weight: var(--font-weight-semibold); } ._aiCommentSettingsField_1g925_9065>span b { color: var(--color-danger); } ._aiCommentSettingsField_1g925_9065 textarea { width: 100%; min-height: 142px; resize: vertical; padding: var(--space-3) var(--space-4); border: 1px solid var(--border-default); border-radius: var(--radius-md); background: var(--color-white); color: var(--text-primary-dark); font-family: inherit; font-size: var(--font-size-sm); line-height: 1.55; outline: none; transition: border-color var(--transition-fast), box-shadow var(--transition-fast); } ._aiCommentSettingsField_1g925_9065 textarea:focus { border-color: var(--color-primary); box-shadow: 0 0 0 3px color-mix(in srgb, var(--color-primary) 12%, transparent); } ._aiCommentSettingsField_1g925_9065 textarea:disabled { background: var(--surface-muted); cursor: not-allowed; } ._aiCommentInstructionMeta_1g925_9177 { display: flex; align-items: flex-start; justify-content: space-between; gap: var(--space-3); margin-top: 6px; } ._aiCommentInstructionMeta_1g925_9177 small { color: var(--text-muted); font-size: var(--font-size-xs); line-height: 1.4; } ._aiCommentFieldError_1g925_9211 { display: block; margin-top: 6px; color: var(--color-danger) !important; font-size: var(--font-size-xs); } /* ====================================================== COMMENT REPLY MODAL Uses global .app-btn styles for every action button. ====================================================== */ ._replyModalOverlay_1g925_9241 { position: fixed; inset: 0; z-index: var(--z-modal-backdrop); display: flex; align-items: center; justify-content: center; padding: var(--space-5); background: rgba(15, 23, 42, 0.42); } ._replyModal_1g925_8855 { width: min(680px, 100%); max-height: calc(100vh - 40px); overflow-y: auto; border: 1px solid var(--border-light); border-radius: var(--radius-xl); background: var(--color-white); box-shadow: var(--shadow-xl); } ._replyModalHeader_1g925_9295 { min-height: 72px; display: flex; align-items: center; justify-content: space-between; gap: var(--space-4); padding: var(--space-4) var(--space-5); border-bottom: 1px solid var(--border-light); } ._replyModalIdentity_1g925_9323 { min-width: 0; display: flex; align-items: center; gap: var(--space-3); } ._replyModalIdentity_1g925_9323 h2, ._replyModalIdentity_1g925_9323 p { margin: 0; } ._replyModalIdentity_1g925_9323 h2 { color: var(--text-primary-dark); font-size: var(--font-size-lg); font-weight: var(--font-weight-bold); } ._replyModalIdentity_1g925_9323 p { margin-top: 3px; color: var(--text-secondary); font-size: var(--font-size-xs); } ._replyModalClose_1g925_9381 { width: 36px; height: 36px; flex-shrink: 0; display: inline-flex; align-items: center; justify-content: center; border: 1px solid transparent; border-radius: var(--radius-md); background: transparent; color: var(--text-secondary); font-size: var(--font-size-lg); cursor: pointer; } ._replyModalClose_1g925_9381:hover:not(:disabled) { border-color: var(--border-light); background: var(--color-bg-light); color: var(--text-primary-dark); } ._replyModalClose_1g925_9381:disabled { opacity: 0.55; cursor: not-allowed; } ._replyCommentContext_1g925_9445 { margin: var(--space-4) var(--space-5) 0; padding: var(--space-3) var(--space-4); border: 1px solid var(--border-light); border-radius: var(--radius-md); background: var(--color-bg-light); } ._replyCommentContext_1g925_9445>span { display: block; margin-bottom: 6px; color: var(--text-secondary); font-size: var(--font-size-xs); font-weight: var(--font-weight-medium); } ._replyCommentContext_1g925_9445 p { margin: 0; color: var(--text-primary-dark); font-size: var(--font-size-sm); line-height: 1.55; } ._replyModeTabs_1g925_9505 { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: var(--space-2); margin: var(--space-4) var(--space-5) 0; padding: 4px; border: 1px solid var(--border-light); border-radius: var(--radius-md); background: var(--color-bg-light); } ._replyModeTabs_1g925_9505 button { min-height: 38px; display: inline-flex; align-items: center; justify-content: center; gap: var(--space-2); border: 1px solid transparent; border-radius: var(--radius-sm); background: transparent; color: var(--text-secondary); font-family: inherit; font-size: var(--font-size-sm); font-weight: var(--font-weight-medium); cursor: pointer; } ._replyModeTabs_1g925_9505 button:hover { color: var(--text-primary-dark); } ._replyModeTabs_1g925_9505 ._replyModeActive_1g925_9587 { border-color: var(--border-light); background: var(--color-white); color: var(--color-primary); box-shadow: var(--shadow-sm); } ._replyModalError_1g925_9605, ._replyModalNotice_1g925_9607 { display: flex; align-items: flex-start; gap: var(--space-2); margin: var(--space-3) var(--space-5) 0; padding: 10px var(--space-3); border: 1px solid var(--border-light); border-radius: var(--radius-md); font-size: var(--font-size-xs); line-height: 1.45; } ._replyModalError_1g925_9605 { color: var(--color-danger); background: color-mix(in srgb, var(--color-danger) 6%, var(--color-white)); border-color: color-mix(in srgb, var(--color-danger) 22%, var(--border-light)); } ._replyModalNotice_1g925_9607 { color: var(--color-success); background: color-mix(in srgb, var(--color-success) 7%, var(--color-white)); border-color: color-mix(in srgb, var(--color-success) 22%, var(--border-light)); } ._replyModalError_1g925_9605 svg, ._replyModalNotice_1g925_9607 svg { margin-top: 1px; flex-shrink: 0; } ._replyModalBody_1g925_8855 { padding: var(--space-4) var(--space-5) var(--space-5); } ._aiPolicySection_1g925_9693 { margin-bottom: var(--space-4); } ._aiPolicyLabel_1g925_9701 { display: block; margin-bottom: 7px; color: var(--text-primary-dark); font-size: var(--font-size-sm); font-weight: var(--font-weight-semibold); } ._aiPolicyMode_1g925_9721 { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: var(--space-2); } ._aiPolicyOption_1g925_9733, ._aiPolicyOptionActive_1g925_9735 { width: 100%; min-height: 76px; display: flex; align-items: flex-start; gap: var(--space-3); padding: var(--space-3); border: 1px solid var(--border-default); border-radius: var(--radius-md); background: var(--color-white); color: var(--text-secondary); font-family: inherit; text-align: left; cursor: pointer; transition: border-color var(--transition-fast), background-color var(--transition-fast); } ._aiPolicyOption_1g925_9733:hover { border-color: var(--border-medium); background: var(--color-bg-light); } ._aiPolicyOptionActive_1g925_9735 { border-color: var(--color-primary); background: var(--brand-soft); color: var(--color-primary); } ._aiPolicyOption_1g925_9733>svg, ._aiPolicyOptionActive_1g925_9735>svg { margin-top: 2px; flex-shrink: 0; font-size: var(--font-size-lg); } ._aiPolicyOption_1g925_9733>span, ._aiPolicyOptionActive_1g925_9735>span { min-width: 0; } ._aiPolicyOption_1g925_9733 strong, ._aiPolicyOptionActive_1g925_9735 strong { display: block; color: var(--text-primary-dark); font-size: var(--font-size-sm); font-weight: var(--font-weight-semibold); } ._aiPolicyOption_1g925_9733 small, ._aiPolicyOptionActive_1g925_9735 small { display: block; margin-top: 4px; color: var(--text-secondary); font-size: var(--font-size-xs); line-height: 1.4; } ._autoReplyInfo_1g925_9873 { display: flex; align-items: flex-start; gap: var(--space-2); margin-top: var(--space-3); padding: 10px var(--space-3); border: 1px solid color-mix(in srgb, var(--color-warning) 28%, var(--border-light)); border-radius: var(--radius-md); background: color-mix(in srgb, var(--color-warning) 6%, var(--color-white)); color: var(--text-secondary); font-size: var(--font-size-xs); line-height: 1.45; } ._autoReplyInfo_1g925_9873 svg { margin-top: 1px; flex-shrink: 0; color: var(--color-warning); } ._replyField_1g925_9921 { display: block; } ._replyField_1g925_9921>span { display: block; margin-bottom: 7px; color: var(--text-primary-dark); font-size: var(--font-size-sm); font-weight: var(--font-weight-semibold); } ._replyField_1g925_9921 textarea { width: 100%; resize: vertical; padding: var(--space-3); border: 1px solid var(--border-default); border-radius: var(--radius-md); outline: 0; background: var(--color-white); color: var(--text-primary-dark); font-family: inherit; font-size: var(--font-size-sm); line-height: 1.55; } ._replyField_1g925_9921 textarea:focus { border-color: var(--color-primary); box-shadow: 0 0 0 3px color-mix(in srgb, var(--color-primary) 10%, transparent); } ._replyField_1g925_9921 textarea::placeholder { color: var(--text-muted); } ._replyField_1g925_9921 small { display: block; margin-top: 6px; color: var(--text-muted); font-size: var(--font-size-xs); line-height: 1.45; } ._replyField_1g925_9921 small:last-child { text-align: right; } ._aiReplyActions_1g925_10037 { display: flex; align-items: center; justify-content: flex-end; flex-wrap: wrap; gap: var(--space-2); margin-top: var(--space-3); } ._aiGenerateAction_1g925_10059 { display: flex; justify-content: center; margin-top: var(--space-3); } ._aiGeneratedDivider_1g925_10073 { position: relative; display: flex; align-items: center; justify-content: center; margin: var(--space-5) 0 var(--space-4); color: var(--text-secondary); font-size: var(--font-size-xs); font-weight: var(--font-weight-medium); } ._aiGeneratedDivider_1g925_10073::before, ._aiGeneratedDivider_1g925_10073::after { content: ""; flex: 1; border-top: 1px dashed var(--border-medium); } ._aiGeneratedDivider_1g925_10073 span { padding: 0 var(--space-3); background: var(--color-white); } ._aiGeneratedReplyField_1g925_10133 { margin-top: 0; } ._aiGeneratedFooter_1g925_10141 { display: flex; align-items: center; justify-content: space-between; gap: var(--space-3); margin-top: var(--space-3); padding-top: var(--space-3); border-top: 1px solid var(--border-light); } ._aiGeneratedFooter_1g925_10141>button:last-child { margin-left: auto; } ._aiDraftPreview_1g925_10175 { margin-top: var(--space-4); padding: var(--space-4); border: 1px solid color-mix(in srgb, var(--color-primary) 22%, var(--border-light)); border-radius: var(--radius-md); background: var(--brand-soft); } ._aiDraftHeader_1g925_10195 { display: flex; align-items: center; justify-content: space-between; gap: var(--space-3); margin-bottom: var(--space-2); } ._aiDraftHeader_1g925_10195>span { display: inline-flex; align-items: center; gap: 6px; color: var(--color-primary); font-size: var(--font-size-sm); font-weight: var(--font-weight-semibold); } ._aiDraftHeader_1g925_10195 strong { color: var(--color-success); font-size: var(--font-size-xs); font-weight: var(--font-weight-medium); } ._aiDraftPreview_1g925_10175 p { margin: 0; color: var(--text-primary-dark); font-size: var(--font-size-sm); line-height: 1.55; white-space: pre-wrap; } ._replyModalFooter_1g925_10275 { display: flex; align-items: center; justify-content: flex-end; gap: var(--space-2); margin-top: var(--space-5); padding-top: var(--space-4); border-top: 1px solid var(--border-light); } @media (max-width: 640px) { ._replyModalOverlay_1g925_9241 { align-items: flex-end; padding: 0; } ._replyModal_1g925_8855 { width: 100%; max-height: 92vh; border-radius: var(--radius-xl) var(--radius-xl) 0 0; } ._replyModalHeader_1g925_9295, ._replyModalBody_1g925_8855 { padding-left: var(--space-4); padding-right: var(--space-4); } ._replyCommentContext_1g925_9445, ._replyModeTabs_1g925_9505, ._replyModalError_1g925_9605, ._replyModalNotice_1g925_9607 { margin-left: var(--space-4); margin-right: var(--space-4); } ._aiCommentModeCards_1g925_8889, ._aiReplyActions_1g925_10037, ._replyModalFooter_1g925_10275 { align-items: stretch; flex-direction: column-reverse; } ._aiReplyActions_1g925_10037 ._app-btn_1g925_203, ._replyModalFooter_1g925_10275 ._app-btn_1g925_203, ._aiGeneratedFooter_1g925_10141 ._app-btn_1g925_203 { width: 100%; } ._aiGeneratedFooter_1g925_10141 { align-items: stretch; flex-direction: column-reverse; } ._aiGeneratedFooter_1g925_10141>button:last-child { margin-left: 0; } } /* ====================================================== PUBLISH / SCHEDULE ACTION FEEDBACK Button colors and hover states continue to come from global .app-btn classes. ====================================================== */ ._publishError_1g925_10415 { display: flex; align-items: flex-start; gap: var(--space-2); margin-bottom: var(--space-3); padding: 10px var(--space-3); border: 1px solid color-mix(in srgb, var(--color-danger) 22%, var(--border-light)); border-radius: var(--radius-md); background: color-mix(in srgb, var(--color-danger) 6%, var(--color-white)); color: var(--color-danger); font-size: var(--font-size-xs); line-height: 1.45; } ._publishError_1g925_10415 svg { margin-top: 1px; flex-shrink: 0; } ._schedulePublishModal_1g925_10461 { width: min(540px, 100%); } ._scheduleModalIcon_1g925_10469 { width: 38px; height: 38px; flex-shrink: 0; display: inline-flex; align-items: center; justify-content: center; border: 1px solid var(--border-light); border-radius: var(--radius-md); background: var(--brand-soft); color: var(--color-primary); font-size: var(--font-size-lg); } ._scheduleFormError_1g925_10507 { display: flex; align-items: flex-start; gap: var(--space-2); margin-bottom: var(--space-4); padding: 10px var(--space-3); border: 1px solid color-mix(in srgb, var(--color-danger) 22%, var(--border-light)); border-radius: var(--radius-md); background: color-mix(in srgb, var(--color-danger) 6%, var(--color-white)); color: var(--color-danger); font-size: var(--font-size-xs); line-height: 1.45; } ._scheduleFormError_1g925_10507 svg { margin-top: 1px; flex-shrink: 0; } ._scheduleField_1g925_10553 { display: block; } ._scheduleField_1g925_10553+._scheduleField_1g925_10553 { margin-top: var(--space-4); } ._scheduleField_1g925_10553>span { display: block; margin-bottom: 7px; color: var(--text-primary-dark); font-size: var(--font-size-sm); font-weight: var(--font-weight-semibold); } ._scheduleField_1g925_10553>span b { color: var(--color-danger); } ._scheduleField_1g925_10553 input { width: 100%; height: 42px; padding: 0 var(--space-3); border: 1px solid var(--border-default); border-radius: var(--radius-md); background: var(--color-white); color: var(--text-primary-dark); font-family: inherit; font-size: var(--font-size-sm); outline: none; transition: border-color var(--transition-fast), box-shadow var(--transition-fast); } ._scheduleField_1g925_10553 input:focus { border-color: var(--color-primary); box-shadow: 0 0 0 3px color-mix(in srgb, var(--color-primary) 12%, transparent); } ._scheduleField_1g925_10553 input:disabled { background: var(--surface-muted); cursor: not-allowed; } ._scheduleField_1g925_10553 small { display: block; margin-top: 6px; color: var(--color-danger); font-size: var(--font-size-xs); } /* ====================================================== PLATFORM ICONS - INSTAGRAM / LINKEDIN / YOUTUBE UI-only extension for Social Media View ====================================================== */ ._instagramIcon_1g925_10689 { background: radial-gradient(circle at 30% 110%, #fdf497 0 5%, #fdf497 5% 10%, #fd5949 45%, #d6249f 60%, #285aeb 90%); } ._linkedinIcon_1g925_10707 { background: #0a66c2; } ._youtubeIcon_1g925_10715 { background: #ff0000; } ._genericPlatformIcon_1g925_10723 { background: var(--text-secondary); } /* ====================================================== INSTAGRAM PREVIEW ====================================================== */ ._instagramPost_1g925_10739 { background: var(--color-white); } ._instagramHeader_1g925_10747, ._linkedinHeader_1g925_10749 { min-height: 58px; display: flex; align-items: center; gap: var(--space-2); padding: 0 var(--space-3); border-bottom: 1px solid var(--border-light); } ._instagramActionRow_1g925_10775 { min-height: 48px; display: flex; align-items: center; justify-content: space-between; padding: 0 var(--space-3); } ._instagramActionLeft_1g925_10795 { display: inline-flex; align-items: center; gap: var(--space-3); } ._instagramActionRow_1g925_10775 button { width: 30px; height: 30px; display: inline-flex; align-items: center; justify-content: center; padding: 0; border: 0; border-radius: var(--radius-full); background: transparent; color: var(--text-primary-dark); font-size: var(--font-size-lg); cursor: pointer; } ._instagramActionRow_1g925_10775 button:hover { background: var(--color-bg-light); } ._instagramCopy_1g925_10859 { padding: 0 var(--space-3) var(--space-3); } ._instagramLikes_1g925_10867 { margin-bottom: 7px; color: var(--text-primary-dark); font-size: var(--font-size-xs); font-weight: var(--font-weight-semibold); } ._instagramCopy_1g925_10859 p { margin: 0; color: var(--text-primary-dark); font-size: var(--font-size-sm); line-height: 1.55; } ._instagramCopy_1g925_10859 p strong { font-weight: var(--font-weight-semibold); } ._instagramTime_1g925_10911 { display: block; margin-top: var(--space-2); color: var(--text-muted); font-size: var(--font-size-xs); } /* ====================================================== LINKEDIN PREVIEW ====================================================== */ ._linkedinPost_1g925_10939 { background: var(--color-white); } ._linkedinCopy_1g925_10947 { padding: var(--space-3); } ._linkedinCopy_1g925_10947 p { margin: 0; color: var(--text-primary-dark); font-size: var(--font-size-sm); line-height: 1.55; } ._linkedinStats_1g925_10973 { min-height: 34px; display: flex; align-items: center; justify-content: space-between; gap: var(--space-2); padding: 0 var(--space-3); border-bottom: 1px solid var(--border-light); color: var(--text-muted); font-size: var(--font-size-xs); } ._linkedinActions_1g925_11009 { min-height: 46px; display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); align-items: center; } ._linkedinActions_1g925_11009 button { min-height: 44px; display: inline-flex; align-items: center; justify-content: center; gap: 6px; padding: 0 6px; border: 0; background: transparent; color: var(--text-secondary); font-family: inherit; font-size: var(--font-size-xs); cursor: pointer; } ._linkedinActions_1g925_11009 button:hover { background: var(--color-bg-light); } /* ====================================================== YOUTUBE PREVIEW ====================================================== */ ._youtubePost_1g925_11089 { overflow: visible; border: 0; border-radius: 0; background: transparent; box-shadow: none; } ._youtubeMediaWrap_1g925_11111 { position: relative; overflow: hidden; border: 1px solid var(--border-light); border-radius: var(--radius-lg); background: #000; } ._youtubeMediaWrap_1g925_11111 ._mediaImage_1g925_1057, ._youtubeMediaWrap_1g925_11111 ._mediaArtwork_1g925_1087 { width: 100%; max-width: none; margin: 0; border-radius: 0; } ._youtubePlayOverlay_1g925_11153 { position: absolute; inset: 0; display: flex; align-items: center; justify-content: center; pointer-events: none; } ._youtubePlayOverlay_1g925_11153 svg { width: 62px; height: 62px; color: #ff0000; fill: rgba(255, 255, 255, 0.96); filter: drop-shadow(0 2px 8px rgba(0, 0, 0, 0.28)); } ._youtubeInfo_1g925_11199 { margin-top: var(--space-3); padding: var(--space-3); border: 1px solid var(--border-light); border-radius: var(--radius-lg); background: var(--color-white); box-shadow: var(--shadow-sm); } ._youtubeIdentity_1g925_11225 { display: grid; grid-template-columns: auto minmax(0, 1fr) auto; align-items: center; gap: var(--space-2); } ._youtubeIdentity_1g925_11225>div { min-width: 0; } ._youtubeIdentity_1g925_11225 strong, ._youtubeIdentity_1g925_11225 span { display: block; } ._youtubeIdentity_1g925_11225 strong { overflow: hidden; color: var(--text-primary-dark); font-size: var(--font-size-sm); font-weight: var(--font-weight-semibold); white-space: nowrap; text-overflow: ellipsis; } ._youtubeIdentity_1g925_11225 span { margin-top: 2px; color: var(--text-muted); font-size: var(--font-size-xs); } ._youtubeDescription_1g925_11303 { margin: var(--space-3) 0 0; color: var(--text-primary-dark); font-size: var(--font-size-sm); line-height: 1.55; } ._youtubeActions_1g925_11321 { min-height: 42px; display: flex; align-items: center; flex-wrap: wrap; gap: var(--space-2); margin-top: var(--space-3); padding-top: var(--space-2); border-top: 1px solid var(--border-light); } ._youtubeActions_1g925_11321 button { min-height: 34px; display: inline-flex; align-items: center; gap: 6px; padding: 0 12px; border: 1px solid var(--border-light); border-radius: var(--radius-full); background: var(--color-bg-light); color: var(--text-primary-dark); font-family: inherit; font-size: var(--font-size-xs); font-weight: var(--font-weight-medium); cursor: pointer; } ._youtubeActions_1g925_11321 button:hover { border-color: var(--border-default); } /* ====================================================== FINAL SOCIAL MEDIA VIEW FIXES - header metadata line - backend-driven platform preview - correct video/image rendering - compact action buttons - no large empty preview/post-status gaps - richer comments metadata ====================================================== */ ._headerMetaLine_1g925_11427 { display: flex; align-items: center; flex-wrap: wrap; gap: 7px; margin-top: 5px; color: var(--text-secondary); font-size: var(--font-size-xs); } ._headerMetaLine_1g925_11427 i { width: 4px; height: 4px; display: inline-block; border-radius: 50%; background: var(--text-muted); } /* ---------------- MEDIA ---------------- */ ._mediaVideo_1g925_11467, ._mediaImage_1g925_1057, ._mediaEmpty_1g925_11471 { width: 100%; max-width: 100%; height: auto; max-height: 520px; display: block; margin: 0 auto; border: 1px solid var(--border-light); border-radius: var(--radius-md); background: #0f172a; } ._mediaVideo_1g925_11467 { object-fit: contain; background: #000; } ._mediaImage_1g925_1057 { object-fit: contain !important; background: var(--color-white); } ._mediaVideoSmall_1g925_11515, ._mediaImageSmall_1g925_2547, ._mediaEmptySmall_1g925_11519 { width: 150px; height: 118px; display: block; flex-shrink: 0; border: 1px solid var(--border-light); border-radius: var(--radius-md); object-fit: contain; background: #000; } ._mediaImageSmall_1g925_2547 { background: var(--color-white); } ._mediaEmpty_1g925_11471, ._mediaEmptySmall_1g925_11519 { display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 7px; color: var(--text-muted); background: var(--color-bg-light); font-size: var(--font-size-xs); } ._mediaEmpty_1g925_11471 { min-height: 210px; } /* ---------------- PLATFORM PREVIEW ---------------- */ ._previewCard_1g925_427 { height: auto !important; min-height: 0 !important; } ._previewArea_1g925_803 { padding: 0 var(--space-4); } ._dynamicPreview_1g925_11603 { width: 100%; max-width: 900px; margin: 0 auto; overflow: hidden; border: 1px solid var(--border-light); border-radius: var(--radius-lg); background: var(--color-white); } ._dynamicPreviewHeader_1g925_11623 { display: flex; align-items: center; justify-content: space-between; gap: var(--space-3); padding: 14px 16px; border-bottom: 1px solid var(--border-light); } ._dynamicPreviewIdentity_1g925_11641, ._dynamicPreviewStatusArea_1g925_11643 { display: flex; align-items: center; gap: var(--space-2); min-width: 0; } ._dynamicPreviewIdentity_1g925_11641>div { min-width: 0; } ._dynamicPreviewIdentity_1g925_11641 strong, ._dynamicPreviewIdentity_1g925_11641 span { display: block; } ._dynamicPreviewIdentity_1g925_11641 strong { color: var(--text-primary-dark); font-size: var(--font-size-sm); font-weight: var(--font-weight-semibold); } ._dynamicPreviewIdentity_1g925_11641 span { margin-top: 3px; color: var(--text-secondary); font-size: var(--font-size-xs); overflow-wrap: anywhere; } ._dynamicPreviewStatusArea_1g925_11643 { justify-content: flex-end; flex-wrap: wrap; } ._dynamicPreviewStatus_1g925_11643 { display: inline-flex; align-items: center; gap: 5px; padding: 5px 9px; border-radius: var(--radius-full); color: var(--publish-status-color, var(--text-secondary)); background: var(--publish-status-bg, var(--color-bg-light)); font-size: var(--font-size-xs); font-weight: var(--font-weight-medium); } ._dynamicPreviewNotice_1g925_11735 { display: flex; align-items: flex-start; gap: 8px; margin: 12px 16px 0; padding: 9px 11px; border: 1px solid var(--border-light); border-radius: var(--radius-md); background: var(--color-bg-light); color: var(--text-secondary); font-size: var(--font-size-xs); } ._dynamicPreviewMeta_1g925_11761 { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 12px; padding: 14px 16px; border-bottom: 1px solid var(--border-light); } ._dynamicPreviewMeta_1g925_11761 span, ._dynamicPreviewMeta_1g925_11761 strong { display: block; } ._dynamicPreviewMeta_1g925_11761 span { color: var(--text-secondary); font-size: var(--font-size-xs); } ._dynamicPreviewMeta_1g925_11761 strong { margin-top: 4px; color: var(--text-primary-dark); font-size: var(--font-size-xs); font-weight: var(--font-weight-medium); overflow-wrap: anywhere; } ._previewError_1g925_11813 { color: var(--color-danger) !important; } ._dynamicPreviewContent_1g925_11821 { display: grid; grid-template-columns: minmax(0, 0.95fr) minmax(300px, 1.05fr); gap: 18px; padding: 16px; align-items: start; } ._dynamicPreviewCopy_1g925_11837 { min-width: 0; } ._dynamicPreviewCopy_1g925_11837>span { color: var(--text-secondary); font-size: var(--font-size-xs); } ._dynamicPreviewCopy_1g925_11837 p { margin: 8px 0 0; color: var(--text-primary-dark); font-size: var(--font-size-sm); line-height: 1.65; white-space: pre-wrap; overflow-wrap: anywhere; } ._dynamicPreviewMedia_1g925_11873 { min-width: 0; } ._dynamicPreviewMedia_1g925_11873 ._mediaVideo_1g925_11467, ._dynamicPreviewMedia_1g925_11873 ._mediaImage_1g925_1057 { width: 100%; max-height: 360px; } ._dynamicPreviewMediaMeta_1g925_11893 { display: flex; justify-content: space-between; gap: 12px; margin-top: 7px; color: var(--text-secondary); font-size: var(--font-size-xs); } ._dynamicPreviewMetrics_1g925_11911 { display: grid; grid-template-columns: repeat(5, minmax(0, 1fr)); border-top: 1px solid var(--border-light); border-bottom: 1px solid var(--border-light); } ._dynamicPreviewMetrics_1g925_11911>div { min-width: 0; padding: 11px 12px; border-right: 1px solid var(--border-light); } ._dynamicPreviewMetrics_1g925_11911>div:nth-child(5n) { border-right: 0; } ._dynamicPreviewMetrics_1g925_11911 span, ._dynamicPreviewMetrics_1g925_11911 strong { display: block; } ._dynamicPreviewMetrics_1g925_11911 span { color: var(--text-secondary); font-size: 11px; } ._dynamicPreviewMetrics_1g925_11911 strong { margin-top: 4px; color: var(--text-primary-dark); font-size: var(--font-size-sm); font-weight: var(--font-weight-semibold); } ._dynamicPreviewFooter_1g925_11979 { min-height: 52px; display: flex; align-items: center; justify-content: space-between; gap: 14px; padding: 9px 16px; } ._dynamicPreviewFooter_1g925_11979>span { color: var(--text-secondary); font-size: var(--font-size-xs); } ._smallActionButton_1g925_12007 { min-height: 30px !important; height: 30px; padding: 0 10px !important; font-size: 11px !important; border-radius: 7px !important; white-space: nowrap; } /* ---------------- DETAILS ---------------- */ ._detailsMediaVideo_1g925_3443, ._detailsMediaImage_1g925_3445, ._detailsMediaEmpty_1g925_3447 { height: 220px !important; max-height: 220px; } ._detailsMediaVideo_1g925_3443 { object-fit: contain !important; background: #000; } ._detailsMediaImage_1g925_3445 { object-fit: contain !important; } ._detailsMediaPreview_1g925_3421 ._app-btn_1g925_203 { min-height: 30px !important; height: 30px; padding: 0 10px !important; font-size: 11px !important; } ._detailPlatformTable_1g925_3833 ._app-btn_1g925_203 { min-height: 29px !important; height: 29px; padding: 0 9px !important; font-size: 11px !important; white-space: nowrap; } /* ---------------- POST STATUS ---------------- */ ._postStatusGrid_1g925_5661 { align-items: start !important; } ._postStatusWideCard_1g925_12103 { grid-column: 1 / -1; } ._timelineCard_1g925_5715, ._platformStatusCard_1g925_12113, ._publishedContentCard_1g925_12115, ._configurationCard_1g925_12117 { height: auto !important; min-height: 0 !important; } ._statusHeroIcon_1g925_5511 { border: 0 !important; background: transparent !important; } ._statusMetricsRow_1g925_12137 { display: grid; grid-template-columns: repeat(5, minmax(0, 1fr)); gap: 8px; margin-top: 12px; padding: 9px 10px; border-radius: var(--radius-md); background: var(--color-bg-light); } ._statusMetricsRow_1g925_12137 span, ._statusMetricsRow_1g925_12137 small, ._statusMetricsRow_1g925_12137 strong { display: block; } ._statusMetricsRow_1g925_12137 small { color: var(--text-secondary); font-size: 10px; } ._statusMetricsRow_1g925_12137 strong { margin-top: 3px; color: var(--text-primary-dark); font-size: var(--font-size-xs); } ._statusEmptyState_1g925_12191 { padding: 8px 0 16px; color: var(--text-secondary); font-size: var(--font-size-sm); } ._publishedContentBody_1g925_6245 { grid-template-columns: 170px minmax(0, 1fr) !important; align-items: start; } ._publishedMediaPreview_1g925_12213 { display: flex; flex-direction: column; align-items: flex-start; gap: 8px; } ._publishedMediaPreview_1g925_12213 ._mediaVideoSmall_1g925_11515, ._publishedMediaPreview_1g925_12213 ._mediaImageSmall_1g925_2547, ._publishedMediaPreview_1g925_12213 ._mediaEmptySmall_1g925_11519 { width: 170px; height: 125px; } ._configurationBody_1g925_6463 { align-items: start; } /* ---------------- COMMENTS ---------------- */ ._commentIdentity_1g925_7507 small { display: block; margin-top: 3px; color: var(--text-muted); font-size: 10px; overflow-wrap: anywhere; } ._commentMetaChips_1g925_12269 { grid-column: 2 / -1; display: flex; flex-wrap: wrap; gap: 5px; margin-top: 4px; } ._commentMetaChips_1g925_12269 span, ._statusFlag_1g925_12287 { display: inline-flex; align-items: center; width: fit-content; min-height: 20px; padding: 2px 7px; border-radius: var(--radius-full); background: var(--color-bg-light); color: var(--text-secondary); font-size: 10px; } ._commentReplyPreview_1g925_12311 { grid-column: 2 / -1; margin-top: 5px; padding: 7px 9px; border-left: 2px solid var(--color-primary); background: var(--brand-soft); color: var(--text-secondary); font-size: 11px; line-height: 1.45; } ._commentReplyPreview_1g925_12311 strong { margin-right: 6px; color: var(--text-primary-dark); } ._commentStatusStack_1g925_12343 { display: flex; flex-direction: column; align-items: flex-start; gap: 5px; } /* ---------------- RESPONSIVE ---------------- */ @media (max-width: 1200px) { ._dynamicPreviewContent_1g925_11821 { grid-template-columns: 1fr; } ._dynamicPreviewMeta_1g925_11761 { grid-template-columns: repeat(2, minmax(0, 1fr)); } ._dynamicPreviewMetrics_1g925_11911 { grid-template-columns: repeat(3, minmax(0, 1fr)); } ._dynamicPreviewMetrics_1g925_11911>div { border-bottom: 1px solid var(--border-light); } ._publishedContentBody_1g925_6245 { grid-template-columns: 150px minmax(0, 1fr) !important; } ._publishedMediaMeta_1g925_6305 { grid-column: 1 / -1; padding-left: 0 !important; border-left: 0 !important; padding-top: 12px; border-top: 1px solid var(--border-light); } } @media (max-width: 760px) { ._headerMetaLine_1g925_11427 { gap: 5px; } ._dynamicPreviewHeader_1g925_11623, ._dynamicPreviewFooter_1g925_11979 { align-items: flex-start; flex-direction: column; } ._dynamicPreviewMeta_1g925_11761, ._dynamicPreviewMetrics_1g925_11911 { grid-template-columns: repeat(2, minmax(0, 1fr)); } ._dynamicPreviewContent_1g925_11821 { padding: 12px; } ._statusHero_1g925_5475 { grid-template-columns: 1fr !important; } ._publishedContentBody_1g925_6245 { grid-template-columns: 1fr !important; } ._publishedMediaPreview_1g925_12213 ._mediaVideoSmall_1g925_11515, ._publishedMediaPreview_1g925_12213 ._mediaImageSmall_1g925_2547, ._publishedMediaPreview_1g925_12213 ._mediaEmptySmall_1g925_11519 { width: 100%; height: auto; max-height: 240px; } } /* Final polish: platform selector uses the available backend platforms cleanly. */ ._platformTabs_1g925_549 { grid-template-columns: repeat(auto-fit, minmax(210px, 1fr)) !important; } ._mediaRejected_1g925_12505 { display: inline-flex; align-items: center; gap: var(--space-2); color: var(--color-danger); } ._progressBar_1g925_1993>span { width: auto; transition: width var(--transition-fast); } ._dynamicPreviewIdentity_1g925_11641 ._platformIcon_1g925_695 { width: 30px; height: 30px; display: inline-flex; align-items: center; justify-content: center; flex-shrink: 0; border-radius: 50%; font-size: var(--font-size-sm); line-height: 1; color: #ffffff !important; margin-top: 0 !important; } ._dynamicPreviewIdentity_1g925_11641 ._platformIcon_1g925_695 svg { width: 14px; height: 14px; display: block; margin: 0; } /* .dynamicPreviewIdentity .platformIcon.facebookIcon { background: #1877f2 !important; color: #ffffff !important; } .dynamicPreviewIdentity .platformIcon.telegramIcon { background: #229ed9 !important; color: #ffffff !important; } .dynamicPreviewIdentity .platformIcon.youtubeIcon { background: #ff0000 !important; color: #ffffff !important; } */ /* ====================================================== POST STATUS GAP FIX UI layout only: - Timeline + Published content stay in the left column - Platform status stays in the right column - Campaign configuration stays as the full row below ====================================================== */ ._postStatusLeftColumn_1g925_12625 { min-width: 0; width: 100%; display: flex; flex-direction: column; gap: var(--space-4); } ._postStatusLeftColumn_1g925_12625>._card_1g925_403 { width: 100%; } ._platformStatusCard_1g925_12113 { min-width: 0; } ._configurationCard_1g925_12117._postStatusWideCard_1g925_12103 { grid-column: 1 / -1; } @media (max-width: 980px) { ._postStatusLeftColumn_1g925_12625 { width: 100%; } } ._loadingContainer_1g925_12681 { min-height: 70vh; display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 12px; color: #64748b; } ._loadingContainer_1g925_12681 p { margin: 0; font-size: 14px; font-weight: 400; } ._loaderSpinner_1g925_12721 { width: 34px; height: 34px; border: 3px solid #dbeafe; border-top-color: #0866ff; border-radius: 50%; animation: _socialLoaderSpin_1g925_1 0.8s linear infinite; } @keyframes _socialLoaderSpin_1g925_1 { to { transform: rotate(360deg); } } /* ====================================================== AI VIDEO (video_options / video_status / thumbnail_url) One consistent block reused in Preview, Details and Post Status. ====================================================== */ ._spinIcon_1g925_12767 { animation: _socialLoaderSpin_1g925_1 0.9s linear infinite; } ._rotate180_1g925_12775 { transform: rotate(180deg); } ._clampText_1g925_12783 { display: -webkit-box !important; overflow: hidden; -webkit-box-orient: vertical; -webkit-line-clamp: 3; overflow-wrap: anywhere; } /* ---------- Status badge ---------- */ ._videoStatusBadge_1g925_12809 { width: fit-content; display: inline-flex; align-items: center; gap: 5px; padding: 3px 9px; border-radius: var(--radius-full); font-size: var(--font-size-xs); font-weight: var(--font-weight-semibold); line-height: 1.4; white-space: nowrap; } ._videoStatusBadge_1g925_12809 svg { flex-shrink: 0; } /* Double-class selectors so parent rules like `.mediaInfo span` cannot override the badge colours. */ ._videoStatusBadge_1g925_12809._videoStatusSucceeded_1g925_12859 { color: var(--color-success); background: color-mix(in srgb, var(--color-success) 11%, var(--color-white)); } ._videoStatusBadge_1g925_12809._videoStatusProcessing_1g925_12869 { color: var(--color-primary); background: color-mix(in srgb, var(--color-primary) 10%, var(--color-white)); } ._videoStatusBadge_1g925_12809._videoStatusFailed_1g925_12879 { color: var(--color-danger); background: color-mix(in srgb, var(--color-danger) 10%, var(--color-white)); } ._videoStatusBadge_1g925_12809._videoStatusDefault_1g925_12889 { color: var(--text-secondary); background: var(--color-bg-light); } ._dynamicPreviewMediaMeta_1g925_11893>span { display: inline-flex; align-items: center; flex-wrap: wrap; gap: 6px; } ._contentBadges_1g925_3185 ._videoStatusBadge_1g925_12809 { min-height: 26px; border-radius: var(--radius-md); } /* ---------- Generating placeholder in media slots ---------- */ ._mediaGenerating_1g925_12931 { position: relative; overflow: hidden; background-color: #0f172a !important; background-position: center; background-size: cover; color: #ffffff !important; } ._mediaGenerating_1g925_12931::before { content: ""; position: absolute; inset: 0; background: rgba(15, 23, 42, 0.62); } ._mediaGenerating_1g925_12931>* { position: relative; z-index: 1; } /* ---------- Page banner ---------- */ ._videoBanner_1g925_12987 { display: flex; align-items: center; gap: var(--space-2); margin-bottom: var(--space-3); padding: 10px var(--space-3); border: 1px solid color-mix(in srgb, var(--color-primary) 24%, var(--border-light)); border-radius: var(--radius-md); background: var(--brand-soft); color: var(--text-primary-dark); font-size: var(--font-size-xs); line-height: 1.45; } ._videoBanner_1g925_12987>svg { flex-shrink: 0; color: var(--color-primary); } ._videoBanner_1g925_12987 strong { font-weight: var(--font-weight-semibold); } ._videoBannerError_1g925_13045 { border-color: color-mix(in srgb, var(--color-danger) 24%, var(--border-light)); background: color-mix(in srgb, var(--color-danger) 6%, var(--color-white)); } ._videoBannerError_1g925_13045>svg { color: var(--color-danger); } /* ---------- Panel ---------- */ ._videoPanel_1g925_13069 { display: flex; flex-direction: column; gap: 14px; padding: 0 16px 16px; } ._videoPanelTop_1g925_13087 { display: grid; grid-template-columns: 132px minmax(0, 1fr); align-items: start; gap: 14px; } ._videoThumb_1g925_13103 { position: relative; width: 132px; height: 132px; overflow: hidden; border: 1px solid var(--border-light); border-radius: var(--radius-md); background: #0f172a; } ._videoThumb_1g925_13103 img { width: 100%; height: 100%; display: block; object-fit: contain; } ._videoThumbEmpty_1g925_13149 { width: 100%; height: 100%; display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 6px; color: var(--text-muted); background: var(--color-bg-light); font-size: 11px; } ._videoThumbEmpty_1g925_13149 svg { font-size: 20px; } ._videoThumbRatio_1g925_13191 { position: absolute; left: 6px; bottom: 6px; padding: 2px 6px; border-radius: var(--radius-sm); background: rgba(15, 23, 42, 0.72); color: #ffffff; font-size: 10px; font-weight: var(--font-weight-semibold); } ._videoPanelSummary_1g925_13223 { min-width: 0; display: flex; flex-direction: column; gap: 6px; } ._videoPanelTitleRow_1g925_13241 { display: flex; align-items: center; flex-wrap: wrap; gap: 8px; } ._videoPanelTitleRow_1g925_13241>strong { min-width: 0; color: var(--text-primary-dark); font-size: var(--font-size-md, 15px); font-weight: var(--font-weight-semibold); overflow-wrap: anywhere; } ._videoPanelSub_1g925_13279 { color: var(--text-secondary); font-size: var(--font-size-xs); } ._videoTaskId_1g925_13291 { min-width: 0; display: flex; align-items: center; gap: 6px; margin-top: 2px; } ._videoTaskId_1g925_13291>span { flex-shrink: 0; color: var(--text-secondary); font-size: 11px; } ._videoTaskId_1g925_13291 code { min-width: 0; overflow: hidden; padding: 2px 7px; border-radius: var(--radius-sm); background: var(--color-bg-light); color: var(--text-primary-dark); font-size: 11px; white-space: nowrap; text-overflow: ellipsis; } ._videoTaskId_1g925_13291 button { width: 24px; height: 24px; flex-shrink: 0; display: inline-flex; align-items: center; justify-content: center; padding: 0; border: 0; border-radius: var(--radius-sm); background: transparent; color: var(--text-secondary); cursor: pointer; } ._videoTaskId_1g925_13291 button:hover { background: var(--brand-soft); color: var(--color-primary); } ._videoFactsGrid_1g925_13417 { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 10px; } ._videoFact_1g925_13417 { min-width: 0; display: flex; align-items: flex-start; gap: 9px; padding: 10px; border: 1px solid var(--border-light); border-radius: var(--radius-md); background: var(--color-white); } ._videoFactIcon_1g925_13463 { width: 28px; height: 28px; flex-shrink: 0; display: inline-flex; align-items: center; justify-content: center; border-radius: var(--radius-md); background: var(--brand-soft); color: var(--color-primary); font-size: 14px; } ._videoFact_1g925_13417>div { min-width: 0; } ._videoFact_1g925_13417 small, ._videoFact_1g925_13417 strong { display: block; } ._videoFact_1g925_13417 small { color: var(--text-secondary); font-size: 11px; } ._videoFact_1g925_13417 strong { margin-top: 2px; color: var(--text-primary-dark); font-size: var(--font-size-xs); font-weight: var(--font-weight-semibold); overflow-wrap: anywhere; } ._videoPrompt_1g925_13551 { padding: 12px; border: 1px solid var(--border-light); border-radius: var(--radius-md); background: var(--color-bg-light); } ._videoPrompt_1g925_13551>span { display: block; margin-bottom: 6px; color: var(--text-secondary); font-size: 11px; font-weight: var(--font-weight-medium); } ._videoPrompt_1g925_13551 p { margin: 0; color: var(--text-primary-dark); font-size: var(--font-size-xs); line-height: 1.6; white-space: pre-wrap; overflow-wrap: anywhere; } ._videoPromptClamp_1g925_13615 { display: -webkit-box; overflow: hidden; -webkit-box-orient: vertical; -webkit-line-clamp: 3; } ._videoPrompt_1g925_13551 button { display: inline-flex; align-items: center; gap: 4px; margin-top: 8px; padding: 0; border: 0; background: transparent; color: var(--color-primary); font-family: inherit; font-size: var(--font-size-xs); font-weight: var(--font-weight-semibold); cursor: pointer; } ._videoPrompt_1g925_13551 button svg { transition: transform 160ms ease; } ._videoPanelNotice_1g925_13683 { display: flex; align-items: flex-start; gap: 8px; padding: 9px 11px; border-radius: var(--radius-md); background: var(--brand-soft); color: var(--text-secondary); font-size: var(--font-size-xs); line-height: 1.45; } ._videoPanelNotice_1g925_13683 svg { flex-shrink: 0; margin-top: 1px; color: var(--color-primary); } ._videoPanelNoticeError_1g925_13733 { background: color-mix(in srgb, var(--color-danger) 6%, var(--color-white)); color: var(--color-danger); } ._videoPanelNoticeError_1g925_13733 svg { color: var(--color-danger); } /* Compact variant — right column of the Preview tab */ ._videoPanelCompact_1g925_13755 { gap: 12px; } ._videoPanelCompact_1g925_13755 ._videoPanelTop_1g925_13087 { grid-template-columns: 92px minmax(0, 1fr); gap: 12px; } ._videoPanelCompact_1g925_13755 ._videoThumb_1g925_13103 { width: 92px; height: 92px; } ._videoPanelCompact_1g925_13755 ._videoFactsGrid_1g925_13417 { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 8px; } ._videoPanelCompact_1g925_13755 ._videoFact_1g925_13417 { padding: 8px; } ._videoPanelCompact_1g925_13755 ._videoFactIcon_1g925_13463 { width: 24px; height: 24px; font-size: 12px; } /* ---------- Responsive ---------- */ @media (max-width: 1280px) { ._videoFactsGrid_1g925_13417 { grid-template-columns: repeat(2, minmax(0, 1fr)); } } @media (max-width: 520px) { ._videoPanelTop_1g925_13087, ._videoPanelCompact_1g925_13755 ._videoPanelTop_1g925_13087 { grid-template-columns: 1fr; } ._videoThumb_1g925_13103, ._videoPanelCompact_1g925_13755 ._videoThumb_1g925_13103 { width: 100%; height: 180px; } ._videoFactsGrid_1g925_13417, ._videoPanelCompact_1g925_13755 ._videoFactsGrid_1g925_13417 { grid-template-columns: 1fr; } } @media (prefers-reduced-motion: reduce) { ._spinIcon_1g925_12767 { animation: none; } }/* ================================================================ STAT ICON — GREEN VARIANT (blue + amber already exist globally as .ct-stat-icon.blue/.amber; this adds the green variant used by Active / Completed) ================================================================ */ ._green_1wly6_13 { background: var(--color-success-soft, #e6f7ec); color: var(--color-success, #16a34a); } /* ================================================================ TABS ================================================================ */ ._tabs_1wly6_33 { display: flex; align-items: center; gap: var(--space-4); border-bottom: 1px solid var(--border-light); } ._tabBtn_1wly6_51 { position: relative; padding: var(--space-2) 0 var(--space-3); border: none; background: transparent; color: var(--text-secondary); font-size: var(--font-size-sm); font-weight: var(--font-weight-medium); cursor: pointer; } ._tabBtn_1wly6_51:hover { color: var(--text-primary-dark); } ._tabActive_1wly6_91 { color: var(--color-primary); font-weight: var(--font-weight-semibold); } ._tabActive_1wly6_91::after { content: ""; position: absolute; left: 0; right: 0; bottom: -1px; height: 2px; border-radius: var(--radius-full); background: var(--color-primary); } /* ================================================================ OPEN RATE CELL ================================================================ */ ._rateCell_1wly6_141 { display: flex; flex-direction: column; gap: 4px; min-width: 90px; } ._rateValue_1wly6_159 { font-size: var(--font-size-xs); font-weight: var(--font-weight-semibold); color: var(--color-success, #16a34a); } ._rateEmpty_1wly6_173 { font-size: var(--font-size-xs); font-weight: var(--font-weight-medium); color: var(--text-secondary); } ._rateTrack_1wly6_187 { width: 100%; height: 5px; border-radius: var(--radius-full); background: var(--border-light); overflow: hidden; } ._rateFill_1wly6_209 { height: 100%; border-radius: var(--radius-full); background: var(--color-success, #16a34a); } ._rateFillEmpty_1wly6_225 { height: 100%; border-radius: var(--radius-full); background: var(--border-light); } /* ================================================================ ACTIONS CELL ================================================================ */ ._actionsCell_1wly6_249 { display: flex; align-items: center; gap: var(--space-2); } /* ================================================================ RESPONSIVE ================================================================ */ @media (max-width: 700px) { ._tabs_1wly6_33 { overflow-x: auto; white-space: nowrap; -ms-overflow-style: none; scrollbar-width: none; } ._tabs_1wly6_33::-webkit-scrollbar { display: none; } }._page_hs773_1 { width: 100%; min-width: 0; display: flex; flex-direction: column; gap: var(--space-4); padding-top: var(--space-4); box-sizing: border-box; } /* ================================================================ BACK LINK ================================================================ */ ._backLink_hs773_37 { display: inline-flex; align-items: center; width: fit-content; border: none; background: transparent; padding: 0; color: var(--color-primary); font-size: var(--font-size-xs); font-weight: var(--font-weight-medium); cursor: pointer; } ._backLink_hs773_37:hover { text-decoration: underline; } /* ================================================================ PAGE HEADER ================================================================ */ ._pageHeader_hs773_91 { width: 100%; display: flex; align-items: flex-start; justify-content: space-between; gap: var(--space-4); } ._titleRow_hs773_111 { display: flex; align-items: center; gap: var(--space-2); margin-bottom: var(--space-1); } ._pageTitle_hs773_129 { margin: 0; font-size: var(--font-size-2xl); font-weight: var(--font-weight-bold); color: var(--text-primary-dark); } ._channelBadge_hs773_147 { padding: 2px 8px; border-radius: var(--radius-sm); background: var(--color-success-soft, #e6f7ec); color: var(--color-success, #16a34a); font-size: var(--font-size-xs); font-weight: var(--font-weight-semibold); } ._pageDescription_hs773_173 { margin: 0; font-size: var(--font-size-xs); color: var(--text-secondary); } ._headerActions_hs773_189 { display: flex; align-items: center; gap: var(--space-2); flex-shrink: 0; } /* ================================================================ COMMON CARD ================================================================ */ ._card_hs773_215 { width: 100%; background: var(--color-white); border: 1px solid var(--border-light); border-radius: var(--radius-lg); box-shadow: var(--shadow-sm); box-sizing: border-box; padding: var(--space-4); } ._sectionTitle_hs773_247 { margin: 0 0 var(--space-3); font-size: var(--font-size-base); font-weight: var(--font-weight-semibold); color: var(--text-primary-dark); } ._sectionTitle_hs773_247 span { color: var(--color-danger); } /* ================================================================ MAIN GRID — LEFT (details+content) / RIGHT (preview) ================================================================ */ ._mainGrid_hs773_281 { width: 100%; display: grid; grid-template-columns: minmax(0, 1fr) 320px; gap: var(--space-4); align-items: start; } ._leftCol_hs773_305 { display: flex; flex-direction: column; gap: var(--space-4); min-width: 0; } ._rightCol_hs773_323 { position: sticky; top: var(--space-4); } /* ================================================================ FORM GRID ================================================================ */ ._formGrid_hs773_343 { width: 100%; display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); column-gap: var(--space-4); row-gap: var(--space-3); } ._formGroup_hs773_365 { min-width: 0; } ._formGroup_hs773_365>label { display: block; margin-bottom: var(--space-1); color: var(--text-primary-dark); font-size: var(--font-size-xs); font-weight: var(--font-weight-medium); } ._formGroup_hs773_365>label span { color: var(--color-danger); } ._formGroup_hs773_365 .app-input, ._formGroup_hs773_365 .app-select { height: 34px; padding-top: 0; padding-bottom: 0; } ._formGroup_hs773_365 textarea { width: 100%; min-height: 50px; resize: vertical; } /* ================================================================ START DATE / TIME FIELD ================================================================ */ ._dateTimeField_hs773_443 { width: 100%; display: flex; gap: var(--space-2); } ._dateInputWrap_hs773_459, ._timeInputWrap_hs773_461 { position: relative; flex: 1; min-width: 0; } ._dateInputWrap_hs773_459 .app-input, ._timeInputWrap_hs773_461 .app-input { width: 100%; height: 34px; padding-right: 30px; } ._fieldIcon_hs773_491 { position: absolute; top: 50%; right: var(--space-2); transform: translateY(-50%); width: 14px; height: 14px; color: var(--text-secondary); pointer-events: none; } /* ================================================================ WHATSAPP CONTENT — TOOLBAR ================================================================ */ ._contentHeader_hs773_531 { display: flex; align-items: center; justify-content: space-between; } ._contentToolbar_hs773_545 { display: flex; align-items: center; justify-content: space-between; gap: var(--space-2); margin-bottom: var(--space-2); } ._toolbarLeft_hs773_565 { display: flex; align-items: center; gap: var(--space-2); } ._toolbarBtn_hs773_579 { display: inline-flex; align-items: center; gap: 6px; padding: 5px 10px; border: 1px solid var(--border-default); border-radius: var(--radius-md); background: var(--color-white); color: var(--text-primary-dark); font-size: var(--font-size-xs); font-weight: var(--font-weight-medium); cursor: pointer; } ._toolbarBtn_hs773_579:hover { border-color: var(--color-primary); color: var(--color-primary); } ._resetBtn_hs773_635 { display: flex; align-items: center; justify-content: center; width: 28px; height: 28px; border: 1px solid var(--border-default); border-radius: var(--radius-md); background: var(--color-white); color: var(--text-secondary); cursor: pointer; } ._resetBtn_hs773_635:hover { border-color: var(--color-primary); color: var(--color-primary); } ._messageArea_hs773_685 { width: 100%; padding: var(--space-3); border: 1px solid var(--border-default); border-radius: var(--radius-md); background: var(--color-white); color: var(--text-primary-dark); font-family: inherit; font-size: var(--font-size-sm); line-height: 1.5; resize: vertical; outline: none; } ._messageArea_hs773_685:focus { border-color: var(--color-primary); } ._contentFooter_hs773_739 { display: flex; align-items: center; gap: var(--space-3); margin-top: var(--space-2); color: var(--text-secondary); font-size: var(--font-size-xs); } ._footerCenter_hs773_765 { flex: 1; text-align: center; } ._templateTag_hs773_777 { color: var(--color-success, #16a34a); font-weight: var(--font-weight-semibold); } ._contentHint_hs773_789 { margin: var(--space-2) 0 0; color: var(--text-secondary); font-size: var(--font-size-xs); } /* ================================================================ MESSAGE PREVIEW — PHONE MOCK ================================================================ */ ._previewCard_hs773_813 { padding: var(--space-4); border: 1px solid var(--border-light); border-radius: var(--radius-lg); background: var(--color-white); box-shadow: var(--shadow-sm); } ._phoneMock_hs773_837 { border: 1px solid var(--border-light); border-radius: var(--radius-lg); overflow: hidden; background: #e9edf1; } ._phoneHeader_hs773_857 { display: flex; align-items: center; gap: var(--space-2); padding: var(--space-2) var(--space-3); background: var(--color-white); border-bottom: 1px solid var(--border-light); color: var(--text-secondary); } ._phoneAvatar_hs773_887 { width: 24px; height: 24px; display: flex; align-items: center; justify-content: center; border-radius: var(--radius-full); background: var(--color-bg-light); color: var(--text-secondary); } ._phoneName_hs773_917 { color: var(--text-primary-dark); font-size: var(--font-size-xs); font-weight: var(--font-weight-medium); } ._phoneBody_hs773_931 { padding: var(--space-4) var(--space-3); min-height: 180px; display: flex; flex-direction: column; align-items: center; gap: var(--space-2); } ._dateChip_hs773_957 { padding: 2px 10px; border-radius: var(--radius-full); background: rgba(255, 255, 255, 0.7); color: var(--text-secondary); font-size: 10px; } ._bubble_hs773_981 { align-self: flex-start; max-width: 100%; display: flex; flex-direction: column; gap: 2px; padding: var(--space-2) var(--space-3); border-radius: var(--radius-md); border-top-left-radius: 2px; background: var(--color-white); box-shadow: var(--shadow-sm); color: var(--text-primary-dark); font-size: var(--font-size-xs); line-height: 1.5; } ._bubbleLine_hs773_1033 { display: block; } ._previewMeta_hs773_1041 { margin: var(--space-2) 0 0; text-align: center; color: var(--text-secondary); font-size: var(--font-size-xs); } /* ================================================================ SELECT CONTACTS HEADER ================================================================ */ ._selectHeader_hs773_1069 { display: flex; align-items: flex-start; justify-content: space-between; gap: var(--space-3); margin-bottom: var(--space-3); } ._selectedBadge_hs773_1089 { flex-shrink: 0; padding: 4px 10px; border-radius: var(--radius-full); background: var(--brand-soft); color: var(--brand-ink); font-size: var(--font-size-xs); font-weight: var(--font-weight-medium); white-space: nowrap; } ._selectAllLink_hs773_1123 { border: none; background: transparent; padding: 0; color: var(--color-primary); font-size: var(--font-size-xs); font-weight: var(--font-weight-medium); cursor: pointer; white-space: nowrap; } ._selectAllLink_hs773_1123:hover { text-decoration: underline; } /* ================================================================ ROW CHECKBOX ================================================================ */ ._rowCheckbox_hs773_1171 { width: 14px; height: 14px; margin: 0; accent-color: var(--color-primary); cursor: pointer; } /* ================================================================ RESPONSIVE ================================================================ */ @media (max-width: 1100px) { ._mainGrid_hs773_281 { grid-template-columns: 1fr; } ._rightCol_hs773_323 { position: static; } } @media (max-width: 900px) { ._formGrid_hs773_343 { grid-template-columns: 1fr; } } @media (max-width: 700px) { ._pageHeader_hs773_91 { flex-direction: column; } ._headerActions_hs773_189 { width: 100%; } ._headerActions_hs773_189 .app-btn { flex: 1; } ._selectHeader_hs773_1069 { flex-direction: column; } ._contentToolbar_hs773_545 { flex-wrap: wrap; } } /* Variables Panel */ ._variablesToggle_hs773_1279 { display: flex; align-items: center; gap: 6px; background: none; border: 1px solid var(--line-soft); border-radius: 6px; padding: 6px 12px; font-size: 13px; color: var(--text-secondary); cursor: pointer; transition: all 0.2s ease; } ._variablesToggle_hs773_1279:hover { background: var(--bg-page); border-color: var(--line-strong); } ._variablesPanel_hs773_1327 { margin: 12px 0 16px 0; padding: 12px 16px; background: var(--bg-page); border: 1px solid var(--line-soft); border-radius: 8px; } ._variablesTitle_hs773_1345 { margin: 0 0 4px 0; font-size: 13px; font-weight: 600; color: var(--text-primary); } ._variablesHint_hs773_1363 { margin: 0 0 12px 0; font-size: 12px; color: var(--text-muted); } ._variablesGrid_hs773_1379 { display: flex; flex-wrap: wrap; gap: 8px; } ._variablesLoading_hs773_1393 { display: flex; align-items: center; gap: 8px; padding: 8px 0; color: var(--text-muted); font-size: 13px; } /* ---------------------------------------------------------------- VARIABLE CHIP Fixed: hover/selected no longer flood the chip with solid blue — that killed the contrast on both the {{code}} text and the description underneath it. Now the chip gets a soft tint + a visible border, and the code itself sits in its own small pill so it reads as "code" rather than plain link text. ------------------------------------------------------------------ */ ._variableChip_hs773_1437 { display: flex; flex-direction: column; align-items: flex-start; gap: 4px; background: var(--bg-card); border: 1px solid var(--line-soft); border-radius: 8px; padding: 8px 12px; text-align: left; cursor: pointer; transition: border-color 0.15s ease, background 0.15s ease, box-shadow 0.15s ease, transform 0.15s ease; } ._variableChip_hs773_1437:hover { /* soft tint, not a solid fill — keeps both the code pill and the description legible */ background: var(--color-primary-soft, #eff6ff); border-color: var(--color-primary, #2563eb); box-shadow: var(--shadow-sm); transform: translateY(-1px); } ._variableChip_hs773_1437:active { transform: translateY(0); box-shadow: none; } ._variableChip_hs773_1437:focus-visible { outline: 2px solid var(--color-primary, #2563eb); outline-offset: 2px; } /* Selected / just-inserted state — pass this as an extra class (e.g. styles.variableChipActive) instead of relying on :hover to represent "selected", so the state persists after the click and isn't lost the moment the pointer moves off the chip. */ ._variableChipActive_hs773_1517 { background: var(--color-primary, #2563eb); border-color: var(--color-primary, #2563eb); } ._variableChipActive_hs773_1517 ._variableCode_hs773_1533 { background: rgba(255, 255, 255, 0.18); color: var(--color-white, #fff); } ._variableChipActive_hs773_1517 ._variableDesc_hs773_1543 { color: rgba(255, 255, 255, 0.85); } ._variableChip_hs773_1437 code, ._variableCode_hs773_1533 { display: inline-block; background: var(--color-primary-soft, #eff6ff); border-radius: 4px; padding: 2px 6px; font-family: "SFMono-Regular", Consolas, "Liberation Mono", Menlo, monospace; font-size: 12.5px; font-weight: 600; color: var(--color-primary-dark, #1d4ed8); transition: background 0.15s ease, color 0.15s ease; } ._variableChip_hs773_1437:hover code, ._variableChip_hs773_1437:hover ._variableCode_hs773_1533 { background: var(--color-white, #fff); } ._variableDesc_hs773_1543 { font-size: 11px; color: var(--text-muted); } ._noVariables_hs773_1607 { padding: 8px 0; font-size: 13px; color: var(--text-muted); } ._variablesNotes_hs773_1623 { display: flex; align-items: center; gap: 6px; margin-top: 12px; padding-top: 12px; border-top: 1px solid var(--line-soft); font-size: 12px; color: var(--text-muted); } /* Content Header */ ._contentHeader_hs773_531 { display: flex; align-items: flex-start; justify-content: space-between; margin-bottom: 12px; } ._contentHeader_hs773_531 ._sectionTitle_hs773_247 { margin-bottom: 0; } /* Error styles */ ._errorCount_hs773_1683 { color: var(--color-danger); } ._errorText_hs773_1691 { font-weight: 600; color: var(--color-danger); }/* ================================================================ BACK LINK ================================================================ */ ._backLink_1rybe_9 { display: inline-flex; align-items: center; width: fit-content; border: none; background: transparent; padding: 0; color: var(--color-primary); font-size: var(--font-size-xs); font-weight: var(--font-weight-medium); cursor: pointer; } ._backLink_1rybe_9:hover { text-decoration: underline; } /* ================================================================ LOADING STATE ================================================================ */ ._loadingContainer_1rybe_63 { display: flex; flex-direction: column; align-items: center; justify-content: center; gap: var(--space-3); min-height: 320px; color: var(--text-secondary); font-size: var(--font-size-sm); } ._loaderSpinner_1rybe_93 { width: 32px; height: 32px; border: 3px solid var(--border-light); border-top-color: var(--color-primary); border-radius: var(--radius-full); animation: _spin_1rybe_1 0.7s linear infinite; } @keyframes _spin_1rybe_1 { to { transform: rotate(360deg); } } /* ================================================================ ERROR / NOT FOUND STATE ================================================================ */ ._errorContainer_1rybe_135 { display: flex; flex-direction: column; align-items: center; justify-content: center; gap: var(--space-2); min-height: 320px; text-align: center; color: var(--text-secondary); } ._errorContainer_1rybe_135 svg { color: var(--color-danger, #dc2626); margin-bottom: var(--space-2); } ._errorContainer_1rybe_135 h2 { margin: 0; color: var(--text-primary-dark); font-size: var(--font-size-lg); font-weight: var(--font-weight-semibold); } ._errorContainer_1rybe_135 p { margin: 0 0 var(--space-3); font-size: var(--font-size-sm); max-width: 360px; } /* ================================================================ TITLE ROW (name + status badge) ================================================================ */ ._titleRow_1rybe_217 { display: flex; align-items: center; gap: var(--space-2); margin-bottom: var(--space-1); } ._titleRow_1rybe_217 .ct-page-title { margin: 0; } /* ================================================================ PAUSE BUTTON (amber outline) ================================================================ */ ._pauseBtn_1rybe_251 { display: inline-flex; align-items: center; gap: var(--space-2); border: 1px solid var(--color-warning, #f59e0b); background: var(--color-white); color: var(--color-warning, #b45309); } ._pauseBtn_1rybe_251:hover { background: var(--color-warning-soft, #fff7ed); } /* ================================================================ META ROW ================================================================ */ ._metaRow_1rybe_293 { display: flex; align-items: center; flex-wrap: wrap; gap: var(--space-5); padding: var(--space-3) var(--space-4); border: 1px solid var(--border-light); border-radius: var(--radius-md); background: var(--color-white); } ._metaItem_1rybe_325 { display: inline-flex; align-items: center; gap: var(--space-2); color: var(--text-secondary); font-size: var(--font-size-xs); } ._metaItem_1rybe_325 strong { color: var(--text-primary-dark); font-weight: var(--font-weight-medium); } /* ================================================================ MESSAGE PREVIEW ================================================================ */ ._messagePreview_1rybe_367 { padding: var(--space-4); border: 1px solid var(--border-light); border-radius: var(--radius-md); background: var(--color-white); } ._previewTitle_1rybe_385 { margin: 0 0 var(--space-2); font-size: var(--font-size-base); font-weight: var(--font-weight-semibold); color: var(--text-primary-dark); } ._messageContent_1rybe_403 { padding: var(--space-3); border: 1px dashed var(--border-light); border-radius: var(--radius-sm); background: var(--color-bg-subtle, #f9fafb); color: var(--text-primary-dark); font-size: var(--font-size-sm); line-height: 1.5; white-space: pre-wrap; word-break: break-word; } ._messageEncoding_1rybe_437 { margin-top: var(--space-2); color: var(--text-secondary); font-size: var(--font-size-xs); } /* ================================================================ SECTION TITLE ================================================================ */ ._sectionTitle_1rybe_461 { margin: 0 0 var(--space-2); font-size: var(--font-size-base); font-weight: var(--font-weight-semibold); color: var(--text-primary-dark); } /* ================================================================ CAMPAIGN PROGRESS GRID (6 cards) ================================================================ */ ._progressGrid_1rybe_487 { display: flex; flex-wrap: wrap; gap: var(--space-3); } ._statCard_1rybe_501 { /* the global .ct-stat-card class lays its children out as a flex ROW — override that so label/icon sit above the number instead of inline with it, and force it back into a real column-stacked card */ display: flex !important; flex-direction: column !important; align-items: stretch !important; flex: 1 1 140px; min-width: 140px; position: relative; overflow: hidden; padding: var(--space-3); border-radius: var(--radius-md, 10px); border: 1px solid var(--border-light); background: var(--color-white); box-shadow: 0 1px 2px rgba(16, 24, 40, 0.04); transition: box-shadow 0.15s ease, transform 0.15s ease, border-color 0.15s ease; } ._statCard_1rybe_501::before { content: ""; position: absolute; top: 0; left: 0; right: 0; height: 3px; background: var(--border-light); } ._statCard_1rybe_501._blue_1rybe_579::before { background: var(--color-info, #2563eb); } ._statCard_1rybe_501._green_1rybe_587::before { background: var(--color-success, #16a34a); } ._statCard_1rybe_501._amber_1rybe_595::before { background: var(--color-warning, #f59e0b); } ._statCard_1rybe_501._red_1rybe_603::before { background: var(--color-danger, #dc2626); } ._statCard_1rybe_501:hover { box-shadow: 0 6px 16px rgba(16, 24, 40, 0.08); border-color: var(--border-medium, #d5dae1); transform: translateY(-1px); } ._statTop_1rybe_623 { display: flex !important; flex-direction: row !important; align-items: flex-start; justify-content: space-between; gap: var(--space-2); width: 100%; margin-bottom: var(--space-1); } ._statLabel_1rybe_649 { font-size: 11px; font-weight: var(--font-weight-medium); color: var(--text-secondary); text-transform: uppercase; letter-spacing: 0.03em; white-space: nowrap; } ._statSub_1rybe_673 { margin-top: 2px; font-size: var(--font-size-xs); color: var(--text-secondary); } ._statCard_1rybe_501 .ct-stat-value { width: 100%; font-size: 20px; font-weight: var(--font-weight-bold, 700); letter-spacing: -0.01em; line-height: 1.2; color: var(--text-primary-dark); } ._statIconSm_1rybe_713 { width: 26px; height: 26px; flex-shrink: 0; display: flex; align-items: center; justify-content: center; border-radius: var(--radius-full); font-size: 12px; } ._statIconSm_1rybe_713._blue_1rybe_579 { background: var(--color-info-soft, #e8f1ff); color: var(--color-info, #2563eb); } ._statIconSm_1rybe_713._green_1rybe_587 { background: var(--color-success-soft, #e6f7ec); color: var(--color-success, #16a34a); } ._statIconSm_1rybe_713._amber_1rybe_595 { background: var(--color-warning-soft, #fff7ed); color: var(--color-warning, #b45309); } ._statIconSm_1rybe_713._red_1rybe_603 { background: var(--color-danger-soft, #fdecec); color: var(--color-danger, #dc2626); } /* ================================================================ EMAIL ENGAGEMENT GRID (4 cards) ================================================================ */ ._engagementGrid_1rybe_791 { display: flex; flex-wrap: wrap; gap: var(--space-3); } ._engagementCard_1rybe_805 { display: flex !important; flex-direction: column !important; align-items: stretch !important; flex: 1 1 160px; min-width: 160px; padding: var(--space-3); border-radius: var(--radius-md, 10px); border: 1px solid var(--border-light); background: var(--color-white); box-shadow: 0 1px 2px rgba(16, 24, 40, 0.04); transition: box-shadow 0.15s ease, transform 0.15s ease, border-color 0.15s ease; } ._engagementCard_1rybe_805:hover { box-shadow: 0 6px 16px rgba(16, 24, 40, 0.08); border-color: var(--border-medium, #d5dae1); transform: translateY(-1px); } ._engagementTop_1rybe_857 { display: flex !important; flex-direction: row !important; align-items: center; gap: var(--space-2); width: 100%; margin-bottom: var(--space-2); } ._engagementIcon_1rybe_881 { width: 26px; height: 26px; flex-shrink: 0; display: flex; align-items: center; justify-content: center; border-radius: var(--radius-sm, 6px); font-size: 12px; } ._engagementIcon_1rybe_881._blue_1rybe_579 { background: var(--color-info-soft, #e8f1ff); color: var(--color-info, #2563eb); } ._engagementIcon_1rybe_881._green_1rybe_587 { background: var(--color-success-soft, #e6f7ec); color: var(--color-success, #16a34a); } ._engagementIcon_1rybe_881._red_1rybe_603 { background: var(--color-danger-soft, #fdecec); color: var(--color-danger, #dc2626); } ._engagementValueRow_1rybe_941 { display: flex !important; flex-direction: row !important; align-items: baseline; gap: var(--space-2); width: 100%; } ._engagementCard_1rybe_805 .ct-stat-value { font-size: 20px; font-weight: var(--font-weight-bold, 700); letter-spacing: -0.01em; line-height: 1.2; color: var(--text-primary-dark); } ._engagementPercent_1rybe_981 { padding: 1px 7px; border-radius: var(--radius-full); font-size: 11px; font-weight: var(--font-weight-semibold); } ._engagementPercent_1rybe_981._greenText_1rybe_999 { color: var(--color-success, #16a34a); background: var(--color-success-soft, #e6f7ec); } ._engagementPercent_1rybe_981._blueText_1rybe_1009 { color: var(--color-info, #2563eb); background: var(--color-info-soft, #e8f1ff); } ._engagementPercent_1rybe_981._redText_1rybe_1019 { color: var(--color-danger, #dc2626); background: var(--color-danger-soft, #fdecec); } ._rateTrack_1rybe_1029 { width: 100%; height: 5px; flex-shrink: 0; margin-top: var(--space-2); border-radius: var(--radius-full); background: var(--border-light); overflow: hidden; } ._rateFill_1rybe_1059 { height: 100%; border-radius: var(--radius-full); transition: width 0.3s ease; } ._rateFill_1rybe_1059._greenBar_1rybe_1075 { background: var(--color-success, #16a34a); } ._rateFill_1rybe_1059._blueBar_1rybe_1083 { background: var(--color-info, #2563eb); } ._rateFill_1rybe_1059._redBar_1rybe_1091 { background: var(--color-danger, #dc2626); } /* ================================================================ CONTACT ACTIVITY HEADER ================================================================ */ ._activityHeader_1rybe_1107 { display: flex; align-items: flex-start; justify-content: space-between; gap: var(--space-3); margin-bottom: var(--space-3); } ._activityHeader_1rybe_1107 .ct-page-sub { margin: 0; } ._recipientsCount_1rybe_1135 { flex-shrink: 0; padding-top: 2px; color: var(--text-secondary); font-size: var(--font-size-xs); white-space: nowrap; } /* ================================================================ BADGE WITH ICON ================================================================ */ ._badgeWithIcon_1rybe_1167 { display: inline-flex; align-items: center; gap: 4px; } /* ================================================================ YES / NO / DASH CELLS ================================================================ */ ._yesCell_1rybe_1189 { display: inline-flex; align-items: center; gap: 4px; color: var(--text-primary-dark); font-size: var(--font-size-xs); } ._noCell_1rybe_1211 { display: inline-flex; align-items: center; gap: 4px; color: var(--text-secondary); font-size: var(--font-size-xs); } ._dashCell_1rybe_1233 { color: var(--text-secondary); font-size: var(--font-size-xs); } ._iconSuccess_1rybe_1245 { color: var(--color-success, #16a34a); } ._iconInfo_1rybe_1253 { color: var(--color-info, #2563eb); } /* ================================================================ RESPONSIVE ================================================================ */ @media (max-width: 1200px) { ._progressGrid_1rybe_487 { grid-template-columns: repeat(3, minmax(0, 1fr)); } ._engagementGrid_1rybe_791 { grid-template-columns: repeat(2, minmax(0, 1fr)); } } @media (max-width: 700px) { ._progressGrid_1rybe_487 { grid-template-columns: repeat(2, minmax(0, 1fr)); } ._engagementGrid_1rybe_791 { grid-template-columns: 1fr; } ._metaRow_1rybe_293 { flex-direction: column; align-items: flex-start; gap: var(--space-2); } ._activityHeader_1rybe_1107 { flex-direction: column; } }._page_9cf32_1 { width: 100%; min-width: 0; display: flex; flex-direction: column; gap: var(--space-4); padding-top: var(--space-4); box-sizing: border-box; } /* ================================================================ BACK LINK ================================================================ */ ._backLink_9cf32_37 { display: inline-flex; align-items: center; width: fit-content; border: none; background: transparent; padding: 0; color: var(--color-primary); font-size: var(--font-size-xs); font-weight: var(--font-weight-medium); cursor: pointer; } ._backLink_9cf32_37:hover { text-decoration: underline; } /* ================================================================ PAGE HEADER ================================================================ */ ._pageHeader_9cf32_91 { width: 100%; display: flex; align-items: flex-start; justify-content: space-between; gap: var(--space-4); } ._titleRow_9cf32_111 { display: flex; align-items: center; gap: var(--space-2); margin-bottom: var(--space-1); } ._pageTitle_9cf32_129 { margin: 0; font-size: var(--font-size-2xl); font-weight: var(--font-weight-bold); color: var(--text-primary-dark); } ._channelBadge_9cf32_147 { padding: 2px 8px; border-radius: var(--radius-sm); background: var(--color-success-soft, #e6f7ec); color: var(--color-success, #16a34a); font-size: var(--font-size-xs); font-weight: var(--font-weight-semibold); } ._pageDescription_9cf32_173 { margin: 0; font-size: var(--font-size-xs); color: var(--text-secondary); } ._headerActions_9cf32_189 { display: flex; align-items: center; gap: var(--space-2); flex-shrink: 0; } /* ================================================================ COMMON CARD ================================================================ */ ._card_9cf32_215 { width: 100%; background: var(--color-white); border: 1px solid var(--border-light); border-radius: var(--radius-lg); box-shadow: var(--shadow-sm); box-sizing: border-box; padding: var(--space-4); } ._sectionTitle_9cf32_247 { margin: 0 0 var(--space-3); font-size: var(--font-size-base); font-weight: var(--font-weight-semibold); color: var(--text-primary-dark); } ._sectionTitle_9cf32_247 span { color: var(--color-danger); } /* ================================================================ MAIN GRID — LEFT (details+template) / RIGHT (preview) ================================================================ */ ._mainGrid_9cf32_281 { width: 100%; display: grid; grid-template-columns: minmax(0, 1fr) 320px; gap: var(--space-4); align-items: start; } ._leftCol_9cf32_305 { display: flex; flex-direction: column; gap: var(--space-4); min-width: 0; } ._rightCol_9cf32_323 { position: sticky; top: var(--space-4); } /* ================================================================ FORM GRID ================================================================ */ ._formGrid_9cf32_343 { width: 100%; display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); column-gap: var(--space-4); row-gap: var(--space-3); } ._formGroup_9cf32_365 { min-width: 0; } ._formGroup_9cf32_365 > label { display: block; margin-bottom: var(--space-1); color: var(--text-primary-dark); font-size: var(--font-size-xs); font-weight: var(--font-weight-medium); } ._formGroup_9cf32_365 > label span { color: var(--color-danger); } ._formGroup_9cf32_365 .app-input, ._formGroup_9cf32_365 .app-select { height: 34px; padding-top: 0; padding-bottom: 0; } ._formGroup_9cf32_365 textarea { width: 100%; min-height: 50px; resize: vertical; } /* ================================================================ DATE / TIME ================================================================ */ ._dateTimeField_9cf32_443 { width: 100%; display: grid; grid-template-columns: 1fr 1fr; gap: 10px; } ._dateInputWrap_9cf32_461, ._timeInputWrap_9cf32_463 { width: 100%; min-width: 0; } ._dateTimeInput_9cf32_473 { width: 100% !important; height: 40px !important; padding: 0 12px !important; border: 1px solid #d7dee8 !important; border-radius: 8px !important; background: #ffffff !important; color: #172033 !important; font-size: 13px !important; font-weight: 500; outline: none; transition: border-color 0.2s ease, box-shadow 0.2s ease, background 0.2s ease; } ._dateTimeInput_9cf32_473:hover { border-color: #b8c4d4 !important; } ._dateTimeInput_9cf32_473:focus { border-color: #2563eb !important; box-shadow: 0 0 0 3px rgba(37, 99, 235, 0.08) !important; } /* Native calendar / clock icon */ ._dateTimeInput_9cf32_473::-webkit-calendar-picker-indicator { cursor: pointer; width: 16px; height: 16px; opacity: 0.65; margin-left: 6px; } ._dateTimeInput_9cf32_473::-webkit-calendar-picker-indicator:hover { opacity: 1; } /* Remove old manually positioned icon */ ._fieldIcon_9cf32_575 { display: none; } @media (max-width: 600px) { ._dateTimeField_9cf32_443 { grid-template-columns: 1fr; } } /* ================================================================ WHATSAPP TEMPLATE SELECTOR ================================================================ */ ._templateSection_9cf32_603 { margin-top: var(--space-4); padding-top: var(--space-4); border-top: 1px solid var(--border-light); } ._templateSection_9cf32_603 > label { display: block; margin-bottom: var(--space-2); color: var(--text-primary-dark); font-size: var(--font-size-xs); font-weight: var(--font-weight-medium); } ._templateSection_9cf32_603 > label span { color: var(--color-danger); } ._templateCard_9cf32_649 { border: 1px solid var(--border-default); border-radius: var(--radius-md); background: var(--color-white); overflow: hidden; } ._templateTopRow_9cf32_669 { display: flex; align-items: center; gap: var(--space-3); padding: var(--space-3); } ._templateThumb_9cf32_687 { position: relative; width: 64px; height: 56px; flex-shrink: 0; display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 2px; padding: 4px; border-radius: var(--radius-sm); background: linear-gradient(160deg, #2f3b2b, #536b3f); color: #f5e6a8; overflow: hidden; } ._templateThumb_9cf32_687 svg { color: #f5e6a8; } ._thumbHeadline_9cf32_747 { font-size: 6px; font-weight: var(--font-weight-bold); line-height: 1.1; text-align: center; color: var(--color-white); } ._thumbDiscount_9cf32_769 { font-size: 11px; font-weight: var(--font-weight-bold); color: #ffd75e; } ._templateInfo_9cf32_783 { flex: 1; min-width: 0; display: flex; flex-direction: column; gap: 4px; } ._templateInfo_9cf32_783 strong { font-size: var(--font-size-sm); font-weight: var(--font-weight-semibold); color: var(--text-primary-dark); } ._templateMeta_9cf32_817 { display: flex; gap: var(--space-5); } ._templateMeta_9cf32_817 > div { display: flex; flex-direction: column; gap: 1px; } ._metaLabel_9cf32_843 { font-size: 10px; color: var(--text-secondary); } ._metaValue_9cf32_855 { font-size: var(--font-size-xs); font-weight: var(--font-weight-medium); color: var(--text-primary-dark); } ._templateChevronBtn_9cf32_869 { display: flex; align-items: center; justify-content: center; width: 28px; height: 28px; flex-shrink: 0; border: 1px solid var(--border-default); border-radius: var(--radius-md); background: var(--color-white); color: var(--text-secondary); cursor: pointer; } ._templateChevronBtn_9cf32_869:hover { border-color: var(--color-primary); color: var(--color-primary); } ._templateBottomRow_9cf32_923 { display: flex; align-items: center; justify-content: space-between; gap: var(--space-3); padding: var(--space-3); border-top: 1px solid var(--border-light); background: var(--color-bg-light); } ._templateBodyPreview_9cf32_951 { margin: 0; color: var(--text-secondary); font-size: var(--font-size-xs); line-height: 1.5; } ._templateHint_9cf32_971 { display: flex; align-items: center; gap: 6px; margin: var(--space-2) 0 0; color: var(--text-secondary); font-size: var(--font-size-xs); } /* ================================================================ TEMPLATE PREVIEW — PHONE MOCK ================================================================ */ ._previewCard_9cf32_1005 { padding: var(--space-4); border: 1px solid var(--border-light); border-radius: var(--radius-lg); background: var(--color-white); box-shadow: var(--shadow-sm); } ._phoneMock_9cf32_1029 { border: 1px solid var(--border-light); border-radius: var(--radius-lg); overflow: hidden; background: #efe7db; } ._phoneHeader_9cf32_1049 { display: flex; align-items: center; gap: var(--space-2); padding: var(--space-2) var(--space-3); background: #128c5e; color: var(--color-white); } ._phoneAvatar_9cf32_1075 { width: 22px; height: 22px; display: flex; align-items: center; justify-content: center; border-radius: var(--radius-full); background: rgba(255, 255, 255, 0.2); color: var(--color-white); } ._phoneName_9cf32_1105 { flex: 1; min-width: 0; font-size: var(--font-size-xs); font-weight: var(--font-weight-medium); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; } ._verifiedIcon_9cf32_1131 { width: 14px; height: 14px; flex-shrink: 0; display: flex; align-items: center; justify-content: center; border-radius: var(--radius-full); background: var(--color-white); color: #128c5e; } ._phoneBody_9cf32_1165 { padding: var(--space-3); } ._templateHero_9cf32_1173 { display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 2px; padding: var(--space-4) var(--space-3); border-radius: var(--radius-md); background: linear-gradient(160deg, #2f3b2b, #536b3f); text-align: center; } ._heroBadgeRow_9cf32_1207 { margin-bottom: 2px; } ._heroIcon_9cf32_1215 { color: #f5e6a8; } ._heroHeadline_9cf32_1223 { color: var(--color-white); font-size: var(--font-size-sm); font-weight: var(--font-weight-bold); letter-spacing: 0.3px; } ._heroDiscount_9cf32_1241 { color: #ffd75e; font-size: 22px; font-weight: var(--font-weight-bold); line-height: 1.1; } ._heroSubline_9cf32_1259 { color: #f5e6a8; font-size: 9px; font-weight: var(--font-weight-semibold); letter-spacing: 0.5px; } ._heroBody_9cf32_1277 { margin: var(--space-2) 0 0; padding: 0 var(--space-1); color: var(--text-primary-dark); font-size: var(--font-size-xs); line-height: 1.5; } ._ctaButtons_9cf32_1301 { display: flex; flex-direction: column; gap: 1px; margin-top: var(--space-2); border-top: 1px solid var(--border-light); } ._ctaBtn_9cf32_1323 { padding: 8px; border: none; border-top: 1px solid var(--border-light); background: transparent; color: var(--color-info, #2563eb); font-size: var(--font-size-xs); font-weight: var(--font-weight-medium); cursor: pointer; } ._ctaBtn_9cf32_1323:first-child { border-top: none; } ._sentMeta_9cf32_1363 { display: flex; align-items: center; justify-content: flex-end; gap: 3px; margin-top: var(--space-2); color: var(--text-secondary); font-size: 10px; } ._checkIcon_9cf32_1391 { color: var(--color-info, #2563eb); } ._previewMeta_9cf32_1399 { margin: var(--space-2) 0 0; text-align: center; color: var(--text-secondary); font-size: var(--font-size-xs); } /* ================================================================ SELECT CONTACTS HEADER ================================================================ */ ._selectHeader_9cf32_1427 { display: flex; align-items: flex-start; justify-content: space-between; gap: var(--space-3); margin-bottom: var(--space-3); } ._selectedBadge_9cf32_1447 { flex-shrink: 0; padding: 4px 10px; border-radius: var(--radius-full); background: var(--color-success-soft, #e6f7ec); color: var(--color-success, #16a34a); font-size: var(--font-size-xs); font-weight: var(--font-weight-medium); white-space: nowrap; } ._selectAllLink_9cf32_1481 { border: none; background: transparent; padding: 0; color: var(--color-primary); font-size: var(--font-size-xs); font-weight: var(--font-weight-medium); cursor: pointer; white-space: nowrap; } ._selectAllLink_9cf32_1481:hover { text-decoration: underline; } /* ================================================================ ROW CHECKBOX ================================================================ */ ._rowCheckbox_9cf32_1529 { width: 14px; height: 14px; margin: 0; accent-color: var(--color-primary); cursor: pointer; } /* ================================================================ RESPONSIVE ================================================================ */ @media (max-width: 1100px) { ._mainGrid_9cf32_281 { grid-template-columns: 1fr; } ._rightCol_9cf32_323 { position: static; } } @media (max-width: 900px) { ._formGrid_9cf32_343 { grid-template-columns: 1fr; } ._templateTopRow_9cf32_669 { flex-wrap: wrap; } } @media (max-width: 700px) { ._pageHeader_9cf32_91 { flex-direction: column; } ._headerActions_9cf32_189 { width: 100%; } ._headerActions_9cf32_189 .app-btn { flex: 1; } ._selectHeader_9cf32_1427 { flex-direction: column; } ._templateBottomRow_9cf32_923 { flex-direction: column; align-items: flex-start; } } /* ============================================================ WHATSAPP TEMPLATE PREVIEW ============================================================ */ ._templateSection_9cf32_603 { width: 100%; margin-top: 24px; } ._templateSection_9cf32_603 > label { display: block; margin-bottom: 8px; font-size: 13px; font-weight: 500; color: #172033; } /* ============================================================ TEMPLATE CARD ============================================================ */ ._templateCard_9cf32_649 { width: 100%; min-height: 86px; display: flex; align-items: center; gap: 12px; padding: 11px 12px; background: #ffffff; border: 1px solid #d7dee8; border-radius: 8px; box-sizing: border-box; cursor: pointer; transition: border-color 0.2s ease, box-shadow 0.2s ease; } ._templateCard_9cf32_649:hover { border-color: #bfc9d6; box-shadow: 0 2px 8px rgba(15, 23, 42, 0.05); } /* ============================================================ THUMBNAIL ============================================================ */ ._templateThumb_9cf32_687 { width: 64px; height: 64px; min-width: 64px; border-radius: 5px; display: flex; flex-direction: column; align-items: center; justify-content: center; background: linear-gradient(145deg, #536b43, #344b2d); color: #ffffff; overflow: hidden; } ._thumbHeadline_9cf32_747 { display: block; margin-top: 3px; font-size: 7px; line-height: 1.15; font-weight: 700; text-align: center; } ._thumbDiscount_9cf32_769 { display: block; margin-top: 2px; font-size: 12px; line-height: 1; font-weight: 800; color: #ffd84d; } /* ============================================================ TEMPLATE INFO ============================================================ */ ._templateInfo_9cf32_783 { flex: 1; min-width: 0; display: flex; flex-direction: column; justify-content: center; } ._templateInfo_9cf32_783 strong { display: block; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; font-size: 13px; line-height: 18px; font-weight: 600; color: #172033; } /* ============================================================ META NO TEMPLATE ID ============================================================ */ ._templateMeta_9cf32_817 { display: flex; align-items: center; margin-top: 5px; } ._metaLabel_9cf32_843 { font-size: 10px; line-height: 13px; color: #64748b; } ._metaValue_9cf32_855 { display: none; } /* ============================================================ STATUS ============================================================ */ ._templateCard_9cf32_649 > ._ct-badge_9cf32_1959 { flex-shrink: 0; margin-left: auto; white-space: nowrap; } /* ============================================================ DROPDOWN BUTTON ============================================================ */ ._templateChevronBtn_9cf32_869 { width: 30px; height: 30px; min-width: 30px; padding: 0; display: flex; align-items: center; justify-content: center; border: 1px solid #d5dce6; border-radius: 7px; background: #ffffff; color: #334155; cursor: pointer; flex-shrink: 0; transition: background 0.2s ease, border-color 0.2s ease; } ._templateChevronBtn_9cf32_869:hover { background: #f8fafc; border-color: #bcc7d5; } /* ============================================================ DROPDOWN ============================================================ */ ._templateDropdown_9cf32_2057 { position: absolute; top: calc(100% + 6px); left: 0; right: 0; z-index: 1000; background: #ffffff; border: 1px solid #d7dee8; border-radius: 9px; box-shadow: 0 10px 30px rgba(15, 23, 42, 0.12); max-height: 300px; overflow-y: auto; padding: 5px; } /* ============================================================ DROPDOWN OPTION ============================================================ */ ._templateOption_9cf32_2111 { width: 100%; min-height: 52px; padding: 8px 9px; display: flex; align-items: center; gap: 10px; border: none; border-radius: 7px; background: #ffffff; cursor: pointer; text-align: left; transition: background 0.15s ease; } ._templateOption_9cf32_2111:hover { background: #f7f9fc; } ._templateOptionSelected_9cf32_2167 { background: #f0f7ec; } /* ============================================================ DROPDOWN THUMB ============================================================ */ ._templateOptionThumb_9cf32_2183 { width: 38px; height: 38px; min-width: 38px; border-radius: 6px; display: flex; align-items: center; justify-content: center; background: #435936; color: #ffffff; } /* ============================================================ DROPDOWN INFO ============================================================ */ ._templateOptionInfo_9cf32_2225 { flex: 1; min-width: 0; } ._templateOptionName_9cf32_2235 { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; font-size: 12px; line-height: 17px; font-weight: 600; color: #172033; } /* ============================================================ DROPDOWN STATUS ============================================================ */ ._templateOption_9cf32_2111 > ._ct-badge_9cf32_1959 { flex-shrink: 0; } /* ============================================================ SELECTED CHECK ============================================================ */ ._templateSelectedIcon_9cf32_2285 { flex-shrink: 0; color: #16a34a; } /* ============================================================ BOTTOM PREVIEW ROW ============================================================ */ ._templateBottomRow_9cf32_923 { width: 100%; min-height: 48px; padding: 6px 12px; display: flex; align-items: center; justify-content: space-between; gap: 15px; background: #f8faff; border: 1px solid #d7dee8; border-top: none; border-radius: 0 0 8px 8px; box-sizing: border-box; } /* ============================================================ PREVIEW TEXT ============================================================ */ ._templateBodyPreview_9cf32_951 { margin: 0; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; font-size: 12px; line-height: 18px; color: #526581; } /* ============================================================ PREVIEW BUTTON ============================================================ */ ._templateBottomRow_9cf32_923 ._app-btn_9cf32_1617 { flex-shrink: 0; height: 36px; padding: 0 14px; display: inline-flex; align-items: center; justify-content: center; gap: 6px; font-size: 12px; } /* ============================================================ HINT ============================================================ */ ._templateHint_9cf32_971 { margin: 7px 0 0; display: flex; align-items: center; gap: 5px; font-size: 11px; line-height: 16px; color: #64748b; } /* ============================================================ RESPONSIVE ============================================================ */ @media (max-width: 768px) { ._templateCard_9cf32_649 { padding: 10px; gap: 10px; } ._templateThumb_9cf32_687 { width: 56px; height: 56px; min-width: 56px; } ._templateMeta_9cf32_817 { display: none; } ._templateCard_9cf32_649 > ._ct-badge_9cf32_1959 { margin-left: auto; } } @media (max-width: 480px) { ._templateCard_9cf32_649 { min-height: 72px; } ._templateThumb_9cf32_687 { width: 50px; height: 50px; min-width: 50px; } ._templateCard_9cf32_649 > ._ct-badge_9cf32_1959 { display: none; } ._templateBottomRow_9cf32_923 { padding: 6px 9px; } ._templateBodyPreview_9cf32_951 { font-size: 11px; } ._templateBottomRow_9cf32_923 ._app-btn_9cf32_1617 { padding: 0 10px; } } /* ============================================================ TEMPLATE PREVIEW BUTTON + MODAL UI ONLY ============================================================ */ /* Right-side preview is removed, so left content uses full width. */ ._mainGrid_9cf32_281 { grid-template-columns: minmax(0, 1fr); } /* Preview button -> Approved badge -> dropdown button */ ._templateActions_9cf32_2593 { margin-left: auto; display: inline-flex; align-items: center; gap: 8px; flex-shrink: 0; } ._templatePreviewBtn_9cf32_2615 { height: 28px; display: inline-flex; align-items: center; justify-content: center; padding: 0 11px; border: 1px solid #cbd5e1; border-radius: 7px; background: #ffffff; color: #2563eb; font-size: 11px; font-weight: 600; cursor: pointer; transition: background 0.18s ease, border-color 0.18s ease, color 0.18s ease; } ._templatePreviewBtn_9cf32_2615:hover { background: #eff6ff; border-color: #93c5fd; color: #1d4ed8; } /* Modal backdrop */ ._previewModalOverlay_9cf32_2683 { position: fixed; inset: 0; z-index: 5000; display: flex; align-items: center; justify-content: center; padding: 24px; background: rgba(15, 23, 42, 0.52); backdrop-filter: blur(2px); } /* Modal */ ._previewModal_9cf32_2683 { width: min(460px, 100%); max-height: calc(100vh - 48px); display: flex; flex-direction: column; overflow: hidden; border: 1px solid #dbe3ee; border-radius: 14px; background: #ffffff; box-shadow: 0 24px 60px rgba(15, 23, 42, 0.22), 0 8px 24px rgba(15, 23, 42, 0.12); } ._previewModalHeader_9cf32_2757 { display: flex; align-items: center; justify-content: space-between; gap: 16px; padding: 16px 18px; border-bottom: 1px solid #e5eaf1; } ._previewModalTitle_9cf32_2781 { margin: 0; color: #0f172a; font-size: 16px; font-weight: 700; } ._previewModalSubtitle_9cf32_2799 { margin: 3px 0 0; color: #64748b; font-size: 11px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; } ._previewModalClose_9cf32_2823 { width: 32px; height: 32px; flex-shrink: 0; display: inline-flex; align-items: center; justify-content: center; padding: 0; border: 1px solid #d8e0ea; border-radius: 8px; background: #ffffff; color: #475569; cursor: pointer; } ._previewModalClose_9cf32_2823:hover { background: #f8fafc; color: #0f172a; } ._previewModalBody_9cf32_2877 { padding: 18px; overflow-y: auto; background: #f8fafc; } /* Keep preview centered inside modal */ ._previewModalBody_9cf32_2877 ._phoneMock_9cf32_1029 { width: 100%; max-width: 380px; margin: 0 auto; } ._previewTemplateMeta_9cf32_2909 { display: flex; align-items: center; justify-content: center; flex-wrap: wrap; gap: 4px 6px; margin-top: 7px; color: #e2e8f0; font-size: 9px; text-transform: uppercase; } ._previewMessageContent_9cf32_2941 { padding: 12px 4px 4px; } ._previewMessageContent_9cf32_2941 ._heroBody_9cf32_1277 { white-space: pre-wrap; overflow-wrap: anywhere; } ._previewFooter_9cf32_2959 { margin: 10px 0 0; padding-top: 8px; border-top: 1px solid rgba(15, 23, 42, 0.08); color: #64748b; font-size: 10px; line-height: 1.45; } /* ============================================================ RESPONSIVE PREVIEW MODAL ============================================================ */ @media (max-width: 700px) { ._templateActions_9cf32_2593 { gap: 6px; } ._previewModalOverlay_9cf32_2683 { padding: 14px; } ._previewModal_9cf32_2683 { max-height: calc(100vh - 28px); } } @media (max-width: 480px) { ._templatePreviewBtn_9cf32_2615 { height: 28px; padding: 0 8px; font-size: 10px; } ._templateActions_9cf32_2593 .ct-badge { display: inline-flex; } ._previewModalOverlay_9cf32_2683 { padding: 10px; } ._previewModalHeader_9cf32_2757 { padding: 13px 14px; } ._previewModalBody_9cf32_2877 { padding: 12px; } } /* ================================================================ BACK LINK ================================================================ */ ._backLink_1jwvi_9 { display: inline-flex; align-items: center; width: fit-content; border: none; background: transparent; padding: 0; color: var(--color-primary); font-size: var(--font-size-xs); font-weight: var(--font-weight-medium); cursor: pointer; } ._backLink_1jwvi_9:hover { text-decoration: underline; } /* ================================================================ TITLE ROW (name + status badge) ================================================================ */ ._titleRow_1jwvi_63 { display: flex; align-items: center; gap: var(--space-2); margin-bottom: var(--space-1); } ._titleRow_1jwvi_63 .ct-page-title { margin: 0; } /* ================================================================ PAUSE BUTTON (amber outline) ================================================================ */ ._pauseBtn_1jwvi_97 { display: inline-flex; align-items: center; gap: var(--space-2); border: 1px solid var(--color-warning, #f59e0b); background: var(--color-white); color: var(--color-warning, #b45309); } ._pauseBtn_1jwvi_97:hover { background: var(--color-warning-soft, #fff7ed); } /* ================================================================ META ROW ================================================================ */ ._metaRow_1jwvi_139 { display: flex; align-items: center; flex-wrap: wrap; gap: var(--space-5); padding: var(--space-3) var(--space-4); border: 1px solid var(--border-light); border-radius: var(--radius-md); background: var(--color-white); margin-bottom: var(--space-4); } ._metaItem_1jwvi_175 { display: inline-flex; align-items: center; gap: var(--space-2); color: var(--text-secondary); font-size: var(--font-size-xs); } ._metaItem_1jwvi_175 strong { color: var(--text-primary-dark); font-weight: var(--font-weight-medium); } /* ================================================================ SECTION TITLE ================================================================ */ ._sectionTitle_1jwvi_217 { margin: 0 0 var(--space-3); font-size: var(--font-size-base); font-weight: var(--font-weight-semibold); color: var(--text-primary-dark); } /* ================================================================ CAMPAIGN PROGRESS Screenshot-style horizontal cards ================================================================ */ ._progressGrid_1jwvi_245 { display: grid; grid-template-columns: repeat(auto-fit, minmax(240px, 1fr)); gap: var(--space-3); width: 100%; margin-bottom: var(--space-5); } ._progressCard_1jwvi_269 { min-width: 0; min-height: 112px; display: flex; align-items: center; gap: 16px; padding: 18px 20px; border: 1px solid var(--border-light); border-radius: var(--radius-lg, 12px); background: var(--color-white); box-shadow: 0 1px 2px rgba(15, 23, 42, 0.04), 0 2px 6px rgba(15, 23, 42, 0.035); } ._progressIcon_1jwvi_311 { width: 56px; height: 56px; flex: 0 0 56px; display: inline-flex; align-items: center; justify-content: center; border-radius: 50%; font-size: 24px; } ._progressIcon_1jwvi_311 svg { width: 24px; height: 24px; } ._progressContent_1jwvi_351 { min-width: 0; display: flex; flex-direction: column; justify-content: center; } ._progressLabel_1jwvi_367 { margin-bottom: 2px; color: var(--text-primary-dark); font-size: var(--font-size-sm, 14px); font-weight: var(--font-weight-medium, 500); line-height: 1.25; } ._progressValue_1jwvi_389 { color: var(--text-primary-dark); font-size: 22px; font-weight: var(--font-weight-bold, 700); line-height: 1.2; } ._progressSub_1jwvi_407 { margin-top: 4px; color: var(--text-secondary); font-size: var(--font-size-xs, 12px); line-height: 1.3; } /* Progress icon tones */ ._progressIcon_1jwvi_311._blue_1jwvi_431 { background: #eaf2ff; color: #0866ff; } ._progressIcon_1jwvi_311._red_1jwvi_441 { background: #ffe9ec; color: #ff3b57; } ._progressIcon_1jwvi_311._green_1jwvi_451 { background: #e4f8ef; color: #10b981; } ._progressIcon_1jwvi_311._purple_1jwvi_461 { background: #f0e7ff; color: #8b5cf6; } ._progressIcon_1jwvi_311._rose_1jwvi_471 { background: #ffe8ec; color: #f43f5e; } ._progressIcon_1jwvi_311._teal_1jwvi_481 { background: #e3f8f5; color: #14b8a6; } ._progressIcon_1jwvi_311._amber_1jwvi_491 { background: #fff3df; color: #f59e0b; } ._progressIcon_1jwvi_311._danger_1jwvi_501 { background: #ffe9e9; color: #ef4444; } /* ================================================================ CONTACT ACTIVITY HEADER ================================================================ */ ._activityHeader_1jwvi_519 { display: flex; align-items: flex-start; justify-content: space-between; gap: var(--space-3); margin-bottom: var(--space-3); } ._activityHeader_1jwvi_519 .ct-page-sub { margin: 0; } ._activityHeader_1jwvi_519 ._sectionTitle_1jwvi_217 { margin-bottom: var(--space-1); } ._recipientsCount_1jwvi_555 { flex-shrink: 0; padding-top: 2px; color: var(--text-secondary); font-size: var(--font-size-xs); white-space: nowrap; } /* ================================================================ BADGE WITH ICON ================================================================ */ ._badgeWithIcon_1jwvi_587 { display: inline-flex; align-items: center; gap: 4px; } /* ================================================================ YES / NO / DASH CELLS ================================================================ */ ._yesCell_1jwvi_609 { display: inline-flex; align-items: center; gap: 4px; color: var(--text-primary-dark); font-size: var(--font-size-xs); } ._noCell_1jwvi_631 { display: inline-flex; align-items: center; gap: 4px; color: var(--text-secondary); font-size: var(--font-size-xs); } ._dashCell_1jwvi_653 { color: var(--text-secondary); font-size: var(--font-size-xs); } ._iconSuccess_1jwvi_665 { color: var(--color-success, #16a34a); } ._iconInfo_1jwvi_673 { color: var(--color-info, #2563eb); } /* ================================================================ RESPONSIVE ================================================================ */ @media (max-width: 1400px) { ._progressGrid_1jwvi_245 { grid-template-columns: repeat(4, minmax(0, 1fr)); } ._progressCard_1jwvi_269 { padding: 16px; } ._progressIcon_1jwvi_311 { width: 50px; height: 50px; flex-basis: 50px; } ._progressIcon_1jwvi_311 svg { width: 21px; height: 21px; } } @media (max-width: 1100px) { ._progressGrid_1jwvi_245 { grid-template-columns: repeat(2, minmax(0, 1fr)); } } @media (max-width: 768px) { ._metaRow_1jwvi_139 { flex-direction: column; align-items: flex-start; gap: var(--space-2); } ._activityHeader_1jwvi_519 { flex-direction: column; } ._progressCard_1jwvi_269 { min-height: 100px; } } @media (max-width: 560px) { ._progressGrid_1jwvi_245 { grid-template-columns: 1fr; } ._progressCard_1jwvi_269 { padding: 14px; } } /* ========================================================= CAMPAIGN SECOND VIEW LEFT: 1. Reply response 2. Email content RIGHT: 1. Activity timeline 2. Delivery details Uses global.css variables ========================================================= */ /* ========================================================= HEADER ========================================================= */ ._headerRow_lo2we_37 { width: 100%; min-width: 0; display: flex; align-items: flex-start; justify-content: space-between; gap: var(--space-4); margin: 0 0 var(--space-4); } ._headerLeft_lo2we_63 { min-width: 0; flex: 1; } ._headerTitleRow_lo2we_73 { min-width: 0; display: flex; align-items: center; flex-wrap: wrap; gap: var(--space-3); } ._contactName_lo2we_93 { margin: 0; color: var(--ink); font-family: var(--font); font-size: var(--font-size-2xl); line-height: 1.25; font-weight: var(--font-weight-bold); } ._headerSubtitle_lo2we_115 { margin: var(--space-1) 0 0; color: var(--ink-soft); font-family: var(--font); font-size: var(--font-size-sm); line-height: 1.4; font-weight: var(--font-weight-normal); } /* ========================================================= HEADER ACTIONS ========================================================= */ ._headerActions_lo2we_145 { flex: 0 0 auto; display: flex; align-items: center; flex-wrap: wrap; gap: var(--space-2); } /* ========================================================= STATUS BADGE ========================================================= */ ._statusBadge_lo2we_173 { min-height: 25px; display: inline-flex; align-items: center; justify-content: center; padding: 4px 10px; border-radius: var(--radius-full); font-family: var(--font); font-size: var(--font-size-xs); line-height: 1; font-weight: var(--font-weight-semibold); white-space: nowrap; } ._status-success_lo2we_211 { color: #078347; background: #e9f9f0; } ._status-info_lo2we_221 { color: var(--brand); background: var(--brand-soft); } ._status-warning_lo2we_231 { color: #b66b00; background: #fff5de; } ._status-danger_lo2we_241 { color: var(--bad); background: #fff0f1; } ._status-neutral_lo2we_251 { color: var(--ink-soft); background: var(--surface-muted); } /* ========================================================= STEPPER CARD ========================================================= */ ._stepperCard_lo2we_269 { width: 100%; min-width: 0; margin: 0 0 var(--space-4); padding: 15px 20px; border: 1px solid var(--line); border-radius: var(--radius-lg); background: var(--surface); box-shadow: var(--sh-sm); } /* ========================================================= STEPPER ========================================================= */ ._stepper_lo2we_269 { width: 100%; min-width: 0; display: flex; align-items: center; } ._stepperItem_lo2we_325 { min-width: 0; flex: 1; display: flex; align-items: center; } ._stepperItem_lo2we_325:last-child { flex: 0 0 auto; } ._stepperNode_lo2we_351 { flex: 0 0 auto; display: flex; flex-direction: column; align-items: center; gap: 5px; } ._stepDot_lo2we_371 { width: 22px; height: 22px; flex: 0 0 22px; display: inline-flex; align-items: center; justify-content: center; border: 1px solid var(--line); border-radius: var(--radius-full); color: var(--ink-muted); background: var(--surface-muted); } ._stepDotDone_lo2we_405 { color: var(--color-white); border-color: var(--ok); background: var(--ok); } ._stepLabel_lo2we_419 { color: var(--ink); font-family: var(--font); font-size: var(--font-size-xs); line-height: 1.3; font-weight: var(--font-weight-semibold); white-space: nowrap; } ._stepConnector_lo2we_441 { min-width: 20px; height: 2px; flex: 1; margin: 0 10px 19px; background: var(--line); } ._stepConnectorDone_lo2we_463 { background: var(--ok); } /* ========================================================= CONTACT INFO BAR ========================================================= */ ._infoBar_lo2we_479 { width: 100%; min-width: 0; display: flex; align-items: center; flex-wrap: wrap; gap: 10px 18px; margin: 0 0 var(--space-4); padding: 12px 18px; border: 1px solid var(--line); border-radius: var(--radius-lg); background: var(--surface); box-shadow: var(--sh-sm); } ._infoItem_lo2we_523 { min-width: 0; display: inline-flex; align-items: center; gap: 6px; color: var(--ink-soft); font-family: var(--font); font-size: var(--font-size-xs); line-height: 1.4; } ._infoItem_lo2we_523 span { min-width: 0; word-break: break-word; overflow-wrap: anywhere; } ._infoIcon_lo2we_567 { flex: 0 0 auto; color: var(--ink-muted); } /* ========================================================= MAIN GRID LEFT = Reply + Email RIGHT = Timeline + Delivery ========================================================= */ ._mainGrid_lo2we_593 { width: 100%; min-width: 0; display: grid; grid-template-columns: minmax(0, 1fr) 360px; align-items: start; gap: 18px; margin: 0; padding: 0; } /* ========================================================= LEFT COLUMN ========================================================= */ ._leftCol_lo2we_637 { width: 100%; min-width: 0; display: flex; flex-direction: column; gap: 18px; margin: 0; padding: 0; } ._leftCol_lo2we_637 > ._card_lo2we_663 { width: 100%; min-width: 0; max-width: none; margin: 0; } /* Your current JSX places: Email content Reply response This CSS changes the visual order to: Reply response Email content */ ._replyCard_lo2we_703 { order: 1; } ._emailCard_lo2we_711 { order: 2; } /* ========================================================= RIGHT COLUMN ========================================================= */ ._sideCol_lo2we_727 { width: 360px; min-width: 0; max-width: 360px; display: flex; flex-direction: column; gap: 18px; margin: 0; padding: 0; } ._sideCol_lo2we_727 > ._card_lo2we_663 { width: 100%; min-width: 0; margin: 0; } /* ========================================================= COMMON CARD ========================================================= */ ._card_lo2we_663 { width: 100%; min-width: 0; margin: 0; padding: 18px; overflow: hidden; border: 1px solid var(--line); border-radius: var(--radius-lg); background: var(--surface); box-shadow: var(--sh-sm); box-sizing: border-box; } /* ========================================================= CARD HEADER ========================================================= */ ._cardHeaderRow_lo2we_823 { width: 100%; min-width: 0; display: flex; align-items: flex-start; justify-content: space-between; flex-wrap: wrap; gap: 10px; margin: 0 0 14px; } ._cardTitle_lo2we_851 { margin: 0 0 14px; color: var(--ink); font-family: var(--font); font-size: var(--font-size-md); line-height: 1.35; font-weight: var(--font-weight-bold); } ._cardHeaderRow_lo2we_823 ._cardTitle_lo2we_851 { margin: 0; } /* ========================================================= EMAIL CONTENT CARD ========================================================= */ ._emailCard_lo2we_711 { width: 100%; min-width: 0; } /* ========================================================= EMAIL META ========================================================= */ ._emailMeta_lo2we_907 { width: 100%; min-width: 0; display: flex; flex-direction: column; gap: 6px; margin: 0 0 16px; padding: 0 0 14px; border-bottom: 1px solid var(--line); color: var(--ink-soft); font-family: var(--font); font-size: var(--font-size-xs); line-height: 1.4; } ._emailMetaRow_lo2we_951 { width: 100%; min-width: 0; display: flex; align-items: flex-start; gap: 10px; } ._emailMetaLabel_lo2we_971 { width: 58px; min-width: 58px; flex: 0 0 58px; color: var(--ink-muted); font-weight: var(--font-weight-medium); } ._emailMetaRow_lo2we_951 > span:last-child { min-width: 0; color: var(--ink-soft); word-break: break-word; overflow-wrap: anywhere; } /* ========================================================= EMAIL PREVIEW ========================================================= */ ._emailPreviewFrame_lo2we_1017 { width: 100%; min-width: 0; height: 470px; min-height: 470px; margin: 0; padding: 0; overflow: hidden; border: 1px solid var(--line); border-radius: var(--radius-md); background: var(--surface); } ._emailPreviewFrame_lo2we_1017 iframe { width: 100% !important; height: 100% !important; display: block; margin: 0; padding: 0; border: 0 !important; background: var(--surface); } /* ========================================================= REPLY CARD ========================================================= */ ._replyCard_lo2we_703 { width: 100%; min-width: 0; order: 1; padding: 18px; overflow: hidden; } /* ========================================================= REPLY CARD HEADER ========================================================= */ ._replyHeader_lo2we_1119 { width: 100%; min-width: 0; display: flex; align-items: flex-start; justify-content: space-between; gap: 16px; margin: 0 0 14px; padding: 0 0 13px; border-bottom: 1px solid var(--line); } ._replyHeaderText_lo2we_1151 { min-width: 0; flex: 1; } ._replyHeaderText_lo2we_1151 ._cardTitle_lo2we_851 { margin: 0; color: var(--ink); font-family: var(--font); font-size: var(--font-size-md); line-height: 1.35; font-weight: var(--font-weight-bold); } ._replyHeaderText_lo2we_1151 p { margin: 4px 0 0; color: var(--ink-muted); font-family: var(--font); font-size: var(--font-size-xs); line-height: 1.4; } /* ========================================================= REPLIED BADGE ========================================================= */ ._replyBadge_lo2we_1213 { min-height: 26px; flex: 0 0 auto; display: inline-flex; align-items: center; justify-content: center; gap: 5px; padding: 5px 10px; border: 1px solid #b8e8cf; border-radius: var(--radius-full); color: #087747; background: #eaf9f1; font-family: var(--font); font-size: var(--font-size-xs); line-height: 1; font-weight: var(--font-weight-semibold); white-space: nowrap; } ._replyBadge_lo2we_1213 svg { flex: 0 0 auto; } /* ========================================================= REPLY LIST ========================================================= */ ._replyList_lo2we_1283 { width: 100%; min-width: 0; display: flex; flex-direction: column; gap: 12px; margin: 0; padding: 0; } /* ========================================================= SINGLE REPLY ITEM ========================================================= */ ._replyItem_lo2we_1317 { width: 100%; min-width: 0; margin: 0; overflow: hidden; border: 1px solid var(--line); border-radius: var(--radius-md); background: var(--surface); } /* ========================================================= REPLY TOP ========================================================= */ ._replyTop_lo2we_1353 { width: 100%; min-width: 0; padding: 12px 14px; border-bottom: 1px solid var(--line); background: var(--surface-muted); } ._replyIdentity_lo2we_1375 { width: 100%; min-width: 0; display: flex; align-items: center; gap: 10px; } /* ========================================================= AVATAR ========================================================= */ ._replyAvatar_lo2we_1403 { width: 36px; height: 36px; flex: 0 0 36px; display: inline-flex; align-items: center; justify-content: center; border-radius: var(--radius-full); color: var(--brand); background: var(--brand-soft); font-family: var(--font); font-size: var(--font-size-xs); line-height: 1; font-weight: var(--font-weight-bold); } /* ========================================================= SENDER INFORMATION ========================================================= */ ._replyIdentityText_lo2we_1453 { min-width: 0; flex: 1; display: flex; align-items: center; justify-content: space-between; gap: 16px; } ._replySenderEmail_lo2we_1477 { min-width: 0; display: block; overflow: hidden; color: var(--ink); font-family: var(--font); font-size: var(--font-size-sm); line-height: 1.4; font-weight: var(--font-weight-semibold); white-space: nowrap; text-overflow: ellipsis; } ._replyDate_lo2we_1513 { flex: 0 0 auto; display: inline-flex; align-items: center; gap: 5px; color: var(--ink-muted); font-family: var(--font); font-size: var(--font-size-xs); line-height: 1.35; white-space: nowrap; } ._replyDate_lo2we_1513 svg { flex: 0 0 auto; } /* ========================================================= REPLY DETAILS ========================================================= */ ._replyDetails_lo2we_1563 { width: 100%; min-width: 0; display: flex; flex-direction: column; gap: 7px; padding: 11px 14px 12px; border-bottom: 1px solid var(--line); background: var(--surface); } ._replyDetailRow_lo2we_1595 { width: 100%; min-width: 0; display: grid; grid-template-columns: 58px minmax(0, 1fr); align-items: flex-start; gap: 10px; } ._replyDetailLabel_lo2we_1619 { color: var(--ink-muted); font-family: var(--font); font-size: var(--font-size-xs); line-height: 1.45; font-weight: var(--font-weight-medium); } ._replyDetailValue_lo2we_1637 { min-width: 0; color: var(--ink); font-family: var(--font); font-size: var(--font-size-xs); line-height: 1.45; font-weight: var(--font-weight-semibold); word-break: break-word; overflow-wrap: anywhere; } /* ========================================================= REPLY CONTENT ========================================================= */ ._replyContent_lo2we_1673 { width: 100%; min-width: 0; padding: 14px; background: var(--surface); } ._replyContent_lo2we_1673 pre { width: 100%; max-width: 100%; margin: 0; padding: 14px; box-sizing: border-box; overflow-x: auto; border: 1px solid var(--line); border-radius: var(--radius-md); color: var(--ink); background: #fbfcff; font-family: var(--font); font-size: var(--font-size-xs); line-height: 1.65; font-weight: var(--font-weight-normal); white-space: pre-wrap; word-break: break-word; overflow-wrap: anywhere; } /* ========================================================= LINKS / LONG TEXT INSIDE REPLY ========================================================= */ ._replyContent_lo2we_1673 pre, ._replyContent_lo2we_1673 pre * { max-width: 100%; } ._replyContent_lo2we_1673 a { color: var(--brand); word-break: break-all; } /* ========================================================= EMPTY REPLY BODY ========================================================= */ ._replyEmpty_lo2we_1783 { width: 100%; padding: 16px; border: 1px dashed var(--line-strong); border-radius: var(--radius-md); color: var(--ink-muted); background: var(--surface-muted); font-family: var(--font); font-size: var(--font-size-xs); text-align: center; } /* ========================================================= NO REPLY ========================================================= */ ._noReply_lo2we_1825 { width: 100%; min-width: 0; display: flex; align-items: center; gap: 11px; padding: 14px; border: 1px dashed var(--line-strong); border-radius: var(--radius-md); background: var(--surface-muted); } ._noReplyIcon_lo2we_1859 { width: 38px; height: 38px; flex: 0 0 38px; display: inline-flex; align-items: center; justify-content: center; border-radius: var(--radius-full); color: var(--brand); background: var(--brand-soft); } ._noReplyContent_lo2we_1891 { min-width: 0; flex: 1; } ._noReplyContent_lo2we_1891 strong { display: block; margin: 0 0 3px; color: var(--ink); font-family: var(--font); font-size: var(--font-size-sm); line-height: 1.4; font-weight: var(--font-weight-semibold); } ._noReplyContent_lo2we_1891 p { margin: 0; color: var(--ink-soft); font-family: var(--font); font-size: var(--font-size-xs); line-height: 1.5; } /* ========================================================= TABLET ========================================================= */ @media (max-width: 767px) { ._replyCard_lo2we_703 { padding: 14px; } ._replyHeader_lo2we_1119 { gap: 10px; margin-bottom: 12px; } ._replyTop_lo2we_1353 { padding: 11px 12px; } ._replyIdentityText_lo2we_1453 { align-items: flex-start; flex-direction: column; gap: 3px; } ._replySenderEmail_lo2we_1477 { width: 100%; white-space: normal; word-break: break-word; overflow-wrap: anywhere; } ._replyDate_lo2we_1513 { white-space: normal; } ._replyDetails_lo2we_1563 { padding: 10px 12px; } ._replyContent_lo2we_1673 { padding: 12px; } ._replyContent_lo2we_1673 pre { padding: 12px; } } /* ========================================================= SMALL MOBILE ========================================================= */ @media (max-width: 480px) { ._replyCard_lo2we_703 { padding: 12px; } ._replyHeader_lo2we_1119 { align-items: flex-start; flex-direction: column; gap: 8px; padding-bottom: 11px; } ._replyBadge_lo2we_1213 { align-self: flex-start; } ._replyAvatar_lo2we_1403 { width: 32px; height: 32px; flex: 0 0 32px; } ._replyIdentity_lo2we_1375 { align-items: flex-start; } ._replyDetailRow_lo2we_1595 { grid-template-columns: 1fr; gap: 2px; } ._replyContent_lo2we_1673 { padding: 10px; } ._replyContent_lo2we_1673 pre { padding: 10px; line-height: 1.6; } ._noReply_lo2we_1825 { align-items: flex-start; padding: 12px; } } /* ========================================================= ACTIVITY TIMELINE ========================================================= */ ._timeline_lo2we_2171 { width: 100%; margin: 0; padding: 0; list-style: none; } ._timelineItem_lo2we_2189 { position: relative; width: 100%; min-width: 0; display: flex; align-items: flex-start; gap: 10px; padding: 0 0 18px; } ._timelineItem_lo2we_2189:last-child { padding-bottom: 0; } ._timelineItem_lo2we_2189:not(:last-child)::before { content: ""; position: absolute; top: 24px; bottom: 0; left: 11px; width: 1px; background: var(--line); } ._timelineIcon_lo2we_2253 { position: relative; z-index: 1; width: 24px; height: 24px; flex: 0 0 24px; display: inline-flex; align-items: center; justify-content: center; border-radius: var(--radius-full); color: var(--ink-soft); background: var(--surface-muted); } /* ========================================================= TIMELINE TONES ========================================================= */ ._tone-success_lo2we_2299 { color: #16a34a; background: #dcfce7; } ._tone-info_lo2we_2309 { color: var(--brand); background: var(--brand-soft); } ._tone-purple_lo2we_2319 { color: #9333ea; background: #f3e8ff; } ._tone-neutral_lo2we_2329 { color: var(--ink-soft); background: var(--surface-muted); } ._tone-warning_lo2we_2339 { color: #d97706; background: #fff7e6; } ._tone-danger_lo2we_2349 { color: #dc2626; background: #fee2e2; } /* ========================================================= TIMELINE CONTENT ========================================================= */ ._timelineContent_lo2we_2367 { min-width: 0; flex: 1; } ._timelineHeadRow_lo2we_2379 { min-width: 0; display: flex; align-items: center; flex-wrap: wrap; gap: 6px; } ._timelineLabel_lo2we_2399 { color: var(--ink); font-family: var(--font); font-size: var(--font-size-sm); line-height: 1.35; font-weight: var(--font-weight-semibold); } ._timelineBadge_lo2we_2417 { min-height: 20px; display: inline-flex; align-items: center; justify-content: center; padding: 2px 7px; border-radius: var(--radius-full); color: var(--brand); background: var(--brand-soft); font-family: var(--font); font-size: 9px; line-height: 1; font-weight: var(--font-weight-semibold); white-space: nowrap; } ._timelineTimestamp_lo2we_2461 { margin-top: 2px; color: var(--ink-muted); font-family: var(--font); font-size: var(--font-size-xs); line-height: 1.35; } ._timelineDetail_lo2we_2481 { margin-top: 3px; color: var(--ink-soft); font-family: var(--font); font-size: var(--font-size-xs); line-height: 1.45; word-break: break-word; overflow-wrap: anywhere; } /* ========================================================= DELIVERY DETAILS ========================================================= */ ._deliveryGrid_lo2we_2515 { width: 100%; min-width: 0; display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 10px 12px; } ._deliveryItem_lo2we_2535 { min-width: 0; display: flex; align-items: center; flex-wrap: wrap; gap: 5px; color: var(--ink-soft); font-family: var(--font); font-size: var(--font-size-xs); line-height: 1.4; } ._deliveryItemFull_lo2we_2567 { grid-column: 1 / -1; } ._deliveryLabel_lo2we_2575 { color: var(--ink-muted); } ._deliveryValue_lo2we_2583 { min-width: 0; color: var(--ink); font-weight: var(--font-weight-semibold); word-break: break-word; overflow-wrap: anywhere; } ._deliveryIconSuccess_lo2we_2605 { flex: 0 0 auto; color: var(--ok); } ._deliveryIconInfo_lo2we_2617 { flex: 0 0 auto; color: var(--brand); } ._deliveryIconPurple_lo2we_2629 { flex: 0 0 auto; color: #9333ea; } ._deliveryIconMuted_lo2we_2641 { flex: 0 0 auto; color: var(--ink-muted); } ._deliveryIconDanger_lo2we_2653 { flex: 0 0 auto; color: var(--bad); } /* ========================================================= EMPTY TEXT ========================================================= */ ._emptyText_lo2we_2673 { margin: 0; color: var(--ink-muted); font-family: var(--font); font-size: var(--font-size-xs); line-height: 1.5; } /* ========================================================= LOADING / ERROR STATE ========================================================= */ ._stateCard_lo2we_2701 { width: 100%; min-height: 320px; display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 7px; padding: 24px; color: var(--ink-muted); text-align: center; } ._stateCard_lo2we_2701 > svg { color: var(--brand); } ._stateCard_lo2we_2701 h2 { margin: 6px 0 0; color: var(--ink); font-family: var(--font); font-size: var(--font-size-lg); font-weight: var(--font-weight-bold); } ._stateCard_lo2we_2701 p { max-width: 440px; margin: 0 0 10px; color: var(--ink-soft); font-family: var(--font); font-size: var(--font-size-sm); line-height: 1.5; } /* ========================================================= LAPTOP ========================================================= */ @media (max-width: 1300px) { ._mainGrid_lo2we_593 { grid-template-columns: minmax(0, 1fr) 340px; gap: 16px; } ._sideCol_lo2we_727 { width: 340px; max-width: 340px; } ._leftCol_lo2we_637, ._sideCol_lo2we_727 { gap: 16px; } ._card_lo2we_663 { padding: 16px; } ._emailPreviewFrame_lo2we_1017 { height: 440px; min-height: 440px; } } /* ========================================================= SMALL LAPTOP ========================================================= */ @media (max-width: 1100px) { ._mainGrid_lo2we_593 { grid-template-columns: minmax(0, 1fr) 310px; gap: 14px; } ._sideCol_lo2we_727 { width: 310px; max-width: 310px; } ._leftCol_lo2we_637, ._sideCol_lo2we_727 { gap: 14px; } /* 310px sidebar is compact, so delivery details look cleaner in one column. */ ._deliveryGrid_lo2we_2515 { grid-template-columns: 1fr; } ._deliveryItemFull_lo2we_2567 { grid-column: auto; } ._emailPreviewFrame_lo2we_1017 { height: 420px; min-height: 420px; } } /* ========================================================= TABLET ========================================================= */ @media (max-width: 960px) { ._mainGrid_lo2we_593 { grid-template-columns: minmax(0, 1fr); gap: 16px; } ._leftCol_lo2we_637 { width: 100%; min-width: 0; gap: 16px; } ._sideCol_lo2we_727 { width: 100%; min-width: 0; max-width: none; gap: 16px; } ._deliveryGrid_lo2we_2515 { grid-template-columns: repeat(2, minmax(0, 1fr)); } ._deliveryItemFull_lo2we_2567 { grid-column: 1 / -1; } ._emailPreviewFrame_lo2we_1017 { height: 420px; min-height: 420px; } } /* ========================================================= MOBILE ========================================================= */ @media (max-width: 767px) { ._headerRow_lo2we_37 { flex-direction: column; gap: 12px; margin-bottom: 12px; } ._headerActions_lo2we_145 { width: 100%; } /* ======================================================= STEPPER MOBILE ======================================================= */ ._stepperCard_lo2we_269 { padding: 12px; } ._stepper_lo2we_269 { align-items: flex-start; flex-direction: column; gap: 10px; } ._stepperItem_lo2we_325, ._stepperItem_lo2we_325:last-child { width: 100%; flex: none; } ._stepperNode_lo2we_351 { flex-direction: row; gap: 8px; } ._stepConnector_lo2we_441 { display: none; } /* ======================================================= INFO MOBILE ======================================================= */ ._infoBar_lo2we_479 { align-items: flex-start; flex-direction: column; gap: 8px; padding: 12px; } ._infoItem_lo2we_523 { width: 100%; } /* ======================================================= MAIN MOBILE ======================================================= */ ._mainGrid_lo2we_593 { gap: 12px; } ._leftCol_lo2we_637, ._sideCol_lo2we_727 { gap: 12px; } ._card_lo2we_663 { padding: 13px; } /* ======================================================= REPLY MOBILE ======================================================= */ ._replyHeader_lo2we_1119 { gap: 8px; } ._replySenderRow_lo2we_3203 { padding: 10px; } ._replySenderLeft_lo2we_3211 { align-items: flex-start; } ._replySenderInfo_lo2we_3219 span { white-space: normal; } /* ======================================================= DELIVERY MOBILE ======================================================= */ ._deliveryGrid_lo2we_2515 { grid-template-columns: 1fr; } ._deliveryItemFull_lo2we_2567 { grid-column: auto; } /* ======================================================= EMAIL MOBILE ======================================================= */ ._emailPreviewFrame_lo2we_1017 { height: 380px; min-height: 380px; } } /* ========================================================= SMALL MOBILE ========================================================= */ @media (max-width: 480px) { ._headerTitleRow_lo2we_73 { align-items: flex-start; flex-direction: column; gap: 8px; } ._contactName_lo2we_93 { font-size: var(--font-size-xl); } ._headerActions_lo2we_145 { flex-direction: column; align-items: stretch; } ._headerActions_lo2we_145 .app-btn { width: 100%; } /* ======================================================= CARD ======================================================= */ ._card_lo2we_663 { padding: 12px; } /* ======================================================= REPLY HEADER ======================================================= */ ._replyHeader_lo2we_1119 { align-items: flex-start; flex-direction: column; } ._replyBadge_lo2we_1213 { align-self: flex-start; } /* ======================================================= REPLY ITEM ======================================================= */ ._replySenderRow_lo2we_3203 { gap: 8px; padding: 10px; } ._replyAvatar_lo2we_1403 { width: 32px; height: 32px; flex: 0 0 32px; } ._replySenderInfo_lo2we_3219 strong { white-space: normal; word-break: break-word; overflow-wrap: anywhere; } ._replyMeta_lo2we_3411 { flex-direction: column; gap: 2px; padding: 10px 10px 0; } ._replySubject_lo2we_3427 { flex-direction: column; gap: 3px; padding: 8px 10px 0; } ._replyBody_lo2we_3443 { padding: 10px; } ._replyBody_lo2we_3443 pre { padding: 10px; } ._noReply_lo2we_1825 { align-items: flex-start; padding: 12px; } /* ======================================================= EMAIL META ======================================================= */ ._emailMetaRow_lo2we_951 { flex-direction: column; gap: 2px; } ._emailMetaLabel_lo2we_971 { width: auto; min-width: 0; flex: none; } ._emailPreviewFrame_lo2we_1017 { height: 340px; min-height: 340px; } /* ======================================================= TIMELINE ======================================================= */ ._timelineHeadRow_lo2we_2379 { align-items: flex-start; flex-direction: column; gap: 3px; } }._page_1engr_1 { width: 100%; min-width: 0; display: flex; flex-direction: column; gap: var(--space-4); padding-top: var(--space-2); box-sizing: border-box; } ._pageHeader_1engr_21 { display: flex; align-items: center; justify-content: space-between; gap: var(--space-4); } ._headerLeft_1engr_35 { display: flex; align-items: center; gap: var(--space-3); min-width: 0; } ._headerLeft_1engr_35 h1 { margin: 0 0 3px; color: var(--text-primary-dark); font-size: var(--font-size-2xl); font-weight: var(--font-weight-bold); } ._headerLeft_1engr_35 p { margin: 0; color: var(--text-secondary); font-size: var(--font-size-sm); } ._backButton_1engr_75 { width: 36px; height: 36px; flex-shrink: 0; display: inline-flex; align-items: center; justify-content: center; border: 1px solid var(--border-light); border-radius: var(--radius-md); background: var(--color-white); color: var(--text-primary-dark); cursor: pointer; } ._backButton_1engr_75:hover { background: var(--color-bg-light); } ._layout_1engr_111 { display: grid; grid-template-columns: minmax(0, 1.1fr) minmax(390px, 0.9fr); gap: var(--space-4); align-items: start; } ._detailsCard_1engr_125, ._previewCard_1engr_127 { min-width: 0; border: 1px solid var(--border-light); border-radius: var(--radius-lg); background: var(--color-white); box-shadow: var(--shadow-sm); } ._detailsCard_1engr_125 { padding: var(--space-5); } ._previewCard_1engr_127 { position: sticky; top: var(--space-3); overflow: hidden; } ._cardHeading_1engr_163 { display: flex; align-items: center; justify-content: space-between; gap: var(--space-3); margin-bottom: var(--space-5); } ._cardHeading_1engr_163 h2, ._previewHeader_1engr_181 h2 { margin: 0; color: var(--text-primary-dark); font-size: var(--font-size-lg); font-weight: var(--font-weight-bold); } ._statusBadge_1engr_195 { display: inline-flex; align-items: center; gap: 5px; padding: 5px 9px; border-radius: 999px; font-size: 11px; font-weight: var(--font-weight-semibold); } ._statusBadge_1engr_195 svg { width: 13px; height: 13px; } ._statusActive_1engr_225 { color: #138a59; background: #e9f9f1; } ._statusDraft_1engr_235 { color: #9a6b12; background: #fff7db; } ._infoGrid_1engr_245 { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: var(--space-3); margin-bottom: var(--space-5); } ._infoItem_1engr_259 { min-width: 0; display: flex; align-items: flex-start; gap: var(--space-3); padding: var(--space-3); border: 1px solid var(--border-light); border-radius: var(--radius-md); background: var(--color-bg-light); } ._infoIcon_1engr_281 { width: 32px; height: 32px; flex-shrink: 0; display: inline-flex; align-items: center; justify-content: center; border-radius: 8px; background: var(--color-white); color: var(--color-primary); border: 1px solid var(--border-light); } ._infoItem_1engr_259 > div { min-width: 0; } ._infoItem_1engr_259 small { display: block; margin-bottom: 3px; color: var(--text-muted); font-size: 10px; } ._infoItem_1engr_259 strong { display: block; color: var(--text-primary-dark); font-size: var(--font-size-sm); font-weight: var(--font-weight-semibold); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; } ._section_1engr_349 { margin-top: var(--space-5); } ._section_1engr_349 > label, ._sectionTitleRow_1engr_359 label { display: block; margin-bottom: var(--space-2); color: var(--text-primary-dark); font-size: var(--font-size-sm); font-weight: var(--font-weight-semibold); } ._sectionTitleRow_1engr_359 { display: flex; align-items: center; justify-content: space-between; gap: var(--space-3); } ._readonlyLabel_1engr_389 { color: var(--text-muted); font-size: 10px; } ._readonlyBox_1engr_399, ._textContent_1engr_401, ._emptyValue_1engr_403 { width: 100%; min-height: 42px; display: flex; align-items: center; padding: 10px 12px; border: 1px solid var(--border-light); border-radius: var(--radius-md); background: #f8fafc; color: var(--text-primary-dark); font-size: var(--font-size-sm); line-height: 1.5; box-sizing: border-box; } ._textContent_1engr_401 { align-items: flex-start; min-height: 90px; white-space: pre-wrap; } ._emptyValue_1engr_403 { color: var(--text-muted); } ._bodyPreview_1engr_453 { height: 360px; overflow: hidden; border: 1px solid var(--border-light); border-radius: var(--radius-md); background: #ffffff; } ._bodyPreview_1engr_453 iframe, ._emailPaper_1engr_471 iframe { width: 100%; height: 100%; border: 0; background: #ffffff; } ._variableList_1engr_485 { display: flex; flex-wrap: wrap; gap: 8px; } ._variableItem_1engr_497 { display: inline-flex; align-items: center; gap: 8px; padding: 7px 10px; border: 1px solid var(--border-light); border-radius: var(--radius-md); background: var(--color-bg-light); } ._variableItem_1engr_497 code { color: var(--color-primary); font-size: 11px; font-weight: var(--font-weight-semibold); } ._variableItem_1engr_497 span { color: var(--text-secondary); font-size: 11px; } ._attachmentList_1engr_539 { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: var(--space-2); } ._attachmentItem_1engr_551 { min-width: 0; display: flex; align-items: center; gap: var(--space-2); padding: var(--space-3); border: 1px solid var(--border-light); border-radius: var(--radius-md); background: var(--color-bg-light); } ._attachmentIcon_1engr_573 { width: 30px; height: 30px; flex-shrink: 0; display: inline-flex; align-items: center; justify-content: center; border-radius: 7px; background: var(--color-white); color: var(--color-primary); } ._attachmentItem_1engr_551 > div { min-width: 0; } ._attachmentItem_1engr_551 strong { display: block; color: var(--text-primary-dark); font-size: 11px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; } ._attachmentItem_1engr_551 small { display: block; margin-top: 2px; color: var(--text-muted); font-size: 10px; } ._metaFooter_1engr_637 { display: flex; flex-wrap: wrap; gap: var(--space-4); margin-top: var(--space-5); padding-top: var(--space-4); border-top: 1px solid var(--border-light); } ._metaFooter_1engr_637 > div { display: flex; align-items: center; gap: 6px; color: var(--text-muted); font-size: 10px; } ._previewHeader_1engr_181 { display: flex; align-items: center; justify-content: space-between; gap: var(--space-3); padding: var(--space-4); border-bottom: 1px solid var(--border-light); } ._previewHeader_1engr_181 p { margin: 3px 0 0; color: var(--text-secondary); font-size: 11px; } ._deviceToggle_1engr_701 { display: flex; align-items: center; padding: 2px; border: 1px solid var(--border-light); border-radius: var(--radius-md); background: var(--color-bg-light); } ._deviceToggle_1engr_701 button { height: 28px; display: inline-flex; align-items: center; gap: 5px; padding: 0 9px; border: none; border-radius: 5px; background: transparent; color: var(--text-secondary); font-size: 10px; } ._deviceToggle_1engr_701 ._deviceActive_1engr_745 { background: var(--color-white); color: var(--color-primary); box-shadow: var(--shadow-xs); } ._deviceToggle_1engr_701 button:disabled { opacity: 0.55; } ._mailMeta_1engr_765 { padding: var(--space-4); border-bottom: 1px solid var(--border-light); } ._mailMeta_1engr_765 > div { display: grid; grid-template-columns: 60px minmax(0, 1fr); gap: var(--space-2); margin-bottom: var(--space-2); } ._mailMeta_1engr_765 > div:last-child { margin-bottom: 0; } ._mailMeta_1engr_765 span { color: var(--text-muted); font-size: 11px; } ._mailMeta_1engr_765 strong { min-width: 0; color: var(--text-primary-dark); font-size: 11px; overflow-wrap: anywhere; } ._emailStage_1engr_821 { min-height: 620px; padding: 28px; background: #f5f8fc; } ._emailPaper_1engr_471 { width: 100%; height: 560px; overflow: hidden; border: 1px solid var(--border-light); border-radius: 12px; background: var(--color-white); box-shadow: 0 8px 24px rgba(15, 23, 42, 0.08); } ._emptyPage_1engr_853 { min-height: 60vh; display: flex; align-items: center; justify-content: center; } ._emptyCard_1engr_867 { width: min(420px, 100%); display: flex; flex-direction: column; align-items: center; gap: var(--space-3); padding: var(--space-6); border: 1px solid var(--border-light); border-radius: var(--radius-lg); background: var(--color-white); text-align: center; } ._emptyCard_1engr_867 svg { color: var(--color-primary); } ._emptyCard_1engr_867 h2 { margin: 0; color: var(--text-primary-dark); } ._emptyCard_1engr_867 p { margin: 0 0 var(--space-2); color: var(--text-secondary); font-size: var(--font-size-sm); line-height: 1.6; } @media (max-width: 1100px) { ._layout_1engr_111 { grid-template-columns: 1fr; } ._previewCard_1engr_127 { position: static; } } @media (max-width: 700px) { ._pageHeader_1engr_21 { align-items: flex-start; flex-direction: column; } ._pageHeader_1engr_21 .app-btn { width: 100%; justify-content: center; } ._infoGrid_1engr_245 { grid-template-columns: 1fr; } ._attachmentList_1engr_539 { grid-template-columns: 1fr; } ._previewHeader_1engr_181 { align-items: flex-start; flex-direction: column; } ._emailStage_1engr_821 { min-height: 520px; padding: 14px; } ._emailPaper_1engr_471 { height: 480px; } ._detailsCard_1engr_125 { padding: var(--space-4); } } /* ====================================================== STAT ICON ====================================================== */ ._statIcon_vpqxn_9 { width: 48px; height: 48px; min-width: 48px; border-radius: 50%; display: flex; align-items: center; justify-content: center; font-size: 22px; } /* TOTAL */ ._statTotal_vpqxn_41 { color: #2563eb; background: #eff6ff; border: 1px solid #dbeafe; } /* ACTIVE */ ._statActive_vpqxn_57 { color: #16a34a; background: #f0fdf4; border: 1px solid #dcfce7; } /* SCHEDULED */ ._statScheduled_vpqxn_73 { color: #f59e0b; background: #fffbeb; border: 1px solid #fef3c7; } /* PUBLISHED */ ._statPublished_vpqxn_89 { color: #16a34a; background: #f0fdf4; border: 1px solid #dcfce7; } /* ====================================================== CAMPAIGN ====================================================== */ ._campaignCell_vpqxn_109 { display: flex; align-items: center; gap: 12px; min-width: 230px; } ._campaignThumbnail_vpqxn_127 { width: 54px; height: 54px; min-width: 54px; border-radius: 7px; overflow: hidden; display: flex; flex-direction: column; justify-content: center; padding: 7px; color: #ffffff; font-size: 8px; font-weight: 800; line-height: 1.15; letter-spacing: 0.2px; box-shadow: inset 0 0 0 1px rgba(255, 255, 255, 0.12); } ._campaignThumbnail_vpqxn_127 span { display: block; } /* THUMBNAILS */ ._product_vpqxn_195 { background: radial-gradient(circle at 75% 30%, #60a5fa 0, transparent 28%), linear-gradient(145deg, #061d86, #2563eb); } ._sale_vpqxn_207 { background: radial-gradient(circle at 80% 25%, #facc15 0, transparent 26%), linear-gradient(145deg, #dc2626, #f97316); } ._ai_vpqxn_219 { background: radial-gradient(circle at 80% 20%, #3b82f6 0, transparent 25%), linear-gradient(145deg, #111827, #4338ca); } ._customer_vpqxn_231 { background: radial-gradient(circle at 85% 75%, #111827 0, transparent 28%), linear-gradient(145deg, #047857, #0f766e); } ._launch_vpqxn_243 { background: linear-gradient(120deg, #111111 0%, #111111 60%, #d97706 100%); } ._engage_vpqxn_251 { background: radial-gradient(circle at 85% 25%, #93c5fd 0, transparent 28%), linear-gradient(145deg, #1e3a8a, #2563eb); } ._campaignMeta_vpqxn_263 { display: flex; flex-direction: column; gap: 3px; } ._campaignMeta_vpqxn_263 strong { color: #0f172a; font-size: 13px; font-weight: 600; white-space: nowrap; } /* ====================================================== PLATFORM ====================================================== */ ._platformGroup_vpqxn_303 { display: flex; align-items: center; gap: 7px; } ._platformIcon_vpqxn_317 { width: 30px; height: 30px; border-radius: 50%; display: flex; align-items: center; justify-content: center; font-size: 16px; border: 1px solid #e2e8f0; background: #ffffff; } ._facebook_vpqxn_351 { color: #1877f2; } ._instagram_vpqxn_359 { color: #e1306c; } ._linkedin_vpqxn_367 { color: #0a66c2; } ._x_vpqxn_375 { color: #111111; } ._threads_vpqxn_383 { color: #111111; } /* ====================================================== SCHEDULE ====================================================== */ ._scheduleText_vpqxn_399 { color: #475569; font-size: 13px; white-space: nowrap; } ._highlightSchedule_vpqxn_415 { color: #2563eb; font-size: 13px; font-weight: 500; white-space: nowrap; } /* ====================================================== ENGAGEMENT ====================================================== */ ._engagementText_vpqxn_441 { color: #475569; font-size: 13px; white-space: nowrap; } ._emptyValue_vpqxn_457 { color: #94a3b8; } /* ====================================================== STATUS ====================================================== */ ._statusBadge_vpqxn_473 { min-width: 76px; display: inline-flex; align-items: center; justify-content: center; padding: 5px 10px; border-radius: 5px; font-size: 12px; font-weight: 500; line-height: 1; } ._statusPublished_vpqxn_507 { color: #15803d; background: #f0fdf4; border: 1px solid #dcfce7; } ._statusActive_vpqxn_523 { color: #15803d; background: #f0fdf4; border: 1px solid #dcfce7; } ._statusScheduled_vpqxn_539 { color: #2563eb; background: #eff6ff; border: 1px solid #dbeafe; } ._statusDraft_vpqxn_555 { color: #475569; background: #f8fafc; border: 1px solid #e2e8f0; } /* ====================================================== ACTION ====================================================== */ ._actionGroup_vpqxn_579 { display: flex; align-items: center; gap: 8px; } ._viewButton_vpqxn_593 { min-height: 32px; padding: 0 13px; border-radius: 6px; border: 1px solid #dbe2ea; background: #ffffff; color: #1e293b; font-size: 12px; font-weight: 500; display: inline-flex; align-items: center; justify-content: center; gap: 6px; cursor: pointer; transition: all 0.2s ease; } ._viewButton_vpqxn_593:hover { background: #f8fafc; border-color: #cbd5e1; } ._moreButton_vpqxn_659 { width: 32px; height: 32px; border: 0; border-radius: 6px; background: transparent; color: #334155; display: flex; align-items: center; justify-content: center; font-size: 18px; cursor: pointer; transition: background 0.2s ease; } ._moreButton_vpqxn_659:hover { background: #f1f5f9; } /* ====================================================== RESPONSIVE ====================================================== */ @media (max-width: 768px) { ._campaignCell_vpqxn_109 { min-width: 200px; } ._campaignThumbnail_vpqxn_127 { width: 46px; height: 46px; min-width: 46px; } ._engagementText_vpqxn_441, ._scheduleText_vpqxn_399, ._highlightSchedule_vpqxn_415 { white-space: normal; } } ._ct-action-group_vpqxn_757 { display: flex; align-items: center; gap: 8px; } /* COMMON */ ._ct-icon-action_vpqxn_773 { width: 34px; height: 34px; display: inline-flex; align-items: center; justify-content: center; border-radius: 9px; border: 1px solid transparent; background: transparent; font-size: 15px; cursor: pointer; transition: background-color 0.2s ease, border-color 0.2s ease, transform 0.2s ease; } ._ct-icon-action_vpqxn_773:hover { transform: translateY(-1px); } /* VIEW */ ._ct-icon-view_vpqxn_831 { color: #2563eb; background: #eff6ff; border-color: #bfdbfe; } ._ct-icon-view_vpqxn_831:hover { background: #dbeafe; border-color: #93c5fd; } /* EDIT */ ._ct-icon-edit_vpqxn_857 { color: #f59e0b; background: #fff7ed; border-color: #fed7aa; } ._ct-icon-edit_vpqxn_857:hover { background: #ffedd5; border-color: #fdba74; } /* DELETE */ ._ct-icon-delete_vpqxn_883 { color: #ef4444; background: #fff1f2; border-color: #fecdd3; } ._ct-icon-delete_vpqxn_883:hover { background: #ffe4e6; border-color: #fda4af; } /* ========================================================================== CREATE CAMPAIGN — POST COMPOSER Layout: Accounts | Composer | Post Preview + AI Chat / Schedule drawers ========================================================================== */ ._composerPage_13k2n_11 { --cc-primary: var(--color-primary, #1f6fff); --cc-primary-hover: var(--color-primary-hover, #1559d6); --cc-primary-soft: var(--brand-soft, #eef4ff); --cc-text: var(--text-primary-dark, #1e2633); --cc-text-2: var(--text-secondary, #5b6475); --cc-muted: var(--text-muted, #98a2b3); --cc-border: var(--border-light, #e6eaf0); --cc-border-strong: var(--border-default, #d5dbe5); --cc-surface: var(--color-white, #ffffff); --cc-bg: #f4f6fa; --cc-danger: var(--color-danger, #e5484d); --cc-success: var(--color-success, #16a34a); --cc-warning: var(--color-warning, #f59e0b); --cc-purple: #8b5cf6; --cc-orange: #f97316; --cc-radius: 10px; --cc-shadow: 0 1px 2px rgba(15, 23, 42, 0.05); --cc-fs-xs: var(--font-size-xs, 12px); --cc-fs-sm: var(--font-size-sm, 13px); position: relative; width: calc(100% + 32px); margin-left: -16px; margin-right: -16px; display: flex; flex-direction: column; min-height: calc(100vh - 64px); background: var(--cc-bg); color: var(--cc-text); font-size: var(--cc-fs-sm); box-sizing: border-box; } ._composerPage_13k2n_11 *, ._composerPage_13k2n_11 *::before, ._composerPage_13k2n_11 *::after { box-sizing: border-box; } ._composerPage_13k2n_11 button { font-family: inherit; } ._spinIcon_13k2n_111 { animation: _ccSpin_13k2n_1 0.8s linear infinite; } @keyframes _ccSpin_13k2n_1 { to { transform: rotate(360deg); } } /* ====================================================== PLATFORM COLORS ====================================================== */ ._facebook_13k2n_139 { color: #1877f2; } ._instagram_13k2n_147 { color: #e1306c; } ._linkedin_13k2n_155 { color: #0a66c2; } ._telegram_13k2n_163 { color: #229ed9; } ._youtube_13k2n_171 { color: #ff0000; } ._xPlatform_13k2n_179, ._threads_13k2n_181 { color: #111827; } ._genericPlatform_13k2n_189 { color: var(--cc-text-2); } /* ====================================================== BUTTONS ====================================================== */ ._btnPrimary_13k2n_205, ._btnSecondary_13k2n_207, ._btnOutline_13k2n_209 { min-height: 38px; display: inline-flex; align-items: center; justify-content: center; gap: 7px; padding: 0 16px; border-radius: 7px; font-size: var(--cc-fs-sm); font-weight: 600; cursor: pointer; transition: background-color 160ms ease, border-color 160ms ease, color 160ms ease; } ._btnPrimary_13k2n_205 { border: 1px solid var(--cc-primary); background: var(--cc-primary); color: #ffffff; } ._btnPrimary_13k2n_205:hover:not(:disabled) { background: var(--cc-primary-hover); } ._btnSecondary_13k2n_207 { border: 1px solid var(--cc-border-strong); background: var(--cc-surface); color: var(--cc-text); } ._btnSecondary_13k2n_207:hover:not(:disabled) { background: #f6f8fb; } ._btnOutline_13k2n_209 { border: 1px solid var(--cc-primary); background: var(--cc-surface); color: var(--cc-primary); } ._btnOutline_13k2n_209:hover:not(:disabled) { background: var(--cc-primary-soft); } ._btnPrimary_13k2n_205:disabled, ._btnSecondary_13k2n_207:disabled, ._btnOutline_13k2n_209:disabled { opacity: 0.55; cursor: not-allowed; } ._btnSecondarySmall_13k2n_331 { min-height: 30px; display: inline-flex; align-items: center; gap: 6px; padding: 0 10px; border: 1px solid var(--cc-border-strong); border-radius: 7px; background: var(--cc-surface); color: var(--cc-text); font-size: var(--cc-fs-xs); font-weight: 600; cursor: pointer; } ._btnSecondarySmall_13k2n_331:hover { border-color: var(--cc-primary); color: var(--cc-primary); } ._btnDangerGhost_13k2n_385 { width: 30px; height: 30px; display: inline-flex; align-items: center; justify-content: center; border: 1px solid #fecaca; border-radius: 7px; background: #fef2f2; color: var(--cc-danger); cursor: pointer; } ._btnDangerGhost_13k2n_385:hover { background: #fee2e2; } ._iconButton_13k2n_427 { width: 34px; height: 34px; display: inline-flex; align-items: center; justify-content: center; border: 0; border-radius: 8px; background: transparent; color: var(--cc-text); font-size: 18px; cursor: pointer; } ._iconButton_13k2n_427:hover { background: #f1f4f9; } ._linkButton_13k2n_473 { padding: 0; border: 0; background: transparent; color: var(--cc-primary); font: inherit; font-weight: 600; cursor: pointer; } ._linkButton_13k2n_473:hover { text-decoration: underline; } /* ====================================================== TOP BAR ====================================================== */ ._topBar_13k2n_517 { min-height: 60px; display: flex; align-items: center; justify-content: space-between; gap: 16px; padding: 10px 18px; border-bottom: 1px solid var(--cc-border); background: var(--cc-surface); } ._topBarLeft_13k2n_549 { min-width: 0; display: flex; align-items: center; gap: 12px; } ._backButton_13k2n_567 { width: 34px; height: 34px; flex-shrink: 0; display: inline-flex; align-items: center; justify-content: center; border: 1px solid var(--cc-border); border-radius: 8px; background: var(--cc-surface); color: var(--cc-text); cursor: pointer; } ._backButton_13k2n_567:hover { background: #f6f8fb; } ._topBarTitle_13k2n_613 { min-width: 0; } ._topBarTitle_13k2n_613 h1 { margin: 0; color: var(--cc-text); font-size: 16px; font-weight: 600; line-height: 1.25; } ._topBarTitle_13k2n_613 span { display: block; margin-top: 2px; color: var(--cc-muted); font-size: 11px; } ._topBarRight_13k2n_661 { display: flex; align-items: center; gap: 10px; } ._aiLaunchButton_13k2n_675 { min-height: 36px; display: inline-flex; align-items: center; gap: 8px; padding: 0 14px; border: 1px solid #c7f0d8; border-radius: 8px; background: #ecfdf3; color: #138a4d; font-size: var(--cc-fs-sm); font-weight: 600; cursor: pointer; } ._aiLaunchButton_13k2n_675:hover { background: #dcfce7; } /* ====================================================== WORKSPACE GRID ====================================================== */ ._workspace_13k2n_735 { flex: 1; min-height: 0; display: grid; grid-template-columns: 270px minmax(0, 1fr) 370px; } ._workspaceCollapsed_13k2n_751 { grid-template-columns: 64px minmax(0, 1fr) 370px; } /* ====================================================== ACCOUNTS PANE ====================================================== */ ._accountsPane_13k2n_767 { min-width: 0; border-right: 1px solid var(--cc-border); background: var(--cc-surface); } ._accountsHeader_13k2n_783 { min-height: 52px; display: flex; align-items: center; justify-content: space-between; gap: 8px; padding: 10px 14px; border-bottom: 1px solid var(--cc-border); } ._workspaceCollapsed_13k2n_751 ._accountsHeader_13k2n_783 { justify-content: center; padding: 10px 6px; } ._accountsHeader_13k2n_783 h2 { margin: 0; color: var(--cc-text); font-size: 15px; font-weight: 600; } ._accountsHeader_13k2n_783 h2 span { color: var(--cc-muted); font-size: var(--cc-fs-xs); font-weight: 500; } ._collapseButton_13k2n_853 { width: 26px; height: 26px; display: inline-flex; align-items: center; justify-content: center; border: 1px solid var(--cc-border); border-radius: 50%; background: var(--cc-surface); color: var(--cc-text-2); cursor: pointer; } ._collapseButton_13k2n_853:hover { border-color: var(--cc-primary); color: var(--cc-primary); } ._accountsBody_13k2n_897 { padding: 12px; position: sticky; top: 0; } ._accountSearch_13k2n_911 { height: 38px; display: flex; align-items: center; gap: 8px; padding: 0 11px; border: 1px solid var(--cc-border-strong); border-radius: 8px; background: var(--cc-surface); color: var(--cc-muted); } ._accountSearch_13k2n_911:focus-within { border-color: var(--cc-primary); box-shadow: 0 0 0 3px rgba(31, 111, 255, 0.08); } ._accountSearch_13k2n_911 input { width: 100%; min-width: 0; border: 0; outline: 0; background: transparent; color: var(--cc-text); font: inherit; font-size: var(--cc-fs-xs); } ._accountsLoading_13k2n_983 { display: flex; align-items: center; gap: 8px; padding: 18px 4px; color: var(--cc-text-2); font-size: var(--cc-fs-xs); } ._accountsEmpty_13k2n_1009 { display: flex; flex-direction: column; align-items: center; gap: 4px; padding: 36px 8px; text-align: center; } ._accountsEmpty_13k2n_1009 strong { color: var(--cc-text); font-size: var(--cc-fs-sm); } ._accountsEmpty_13k2n_1009 span { color: var(--cc-text-2); font-size: 11px; } ._accountsBulk_13k2n_1057 { display: flex; justify-content: flex-end; gap: 12px; margin-top: 10px; } ._accountsBulk_13k2n_1057 button { padding: 0; border: 0; background: transparent; color: var(--cc-primary); font-size: 11px; font-weight: 600; cursor: pointer; } ._accountList_13k2n_1103 { display: flex; flex-direction: column; gap: 8px; margin-top: 10px; } ._accountRow_13k2n_1121 { width: 100%; min-height: 60px; display: grid; grid-template-columns: 36px minmax(0, 1fr) 20px; align-items: center; gap: 10px; padding: 9px 10px; border: 1px solid var(--cc-border); border-radius: 9px; background: var(--cc-surface); text-align: left; cursor: pointer; transition: border-color 160ms ease, background-color 160ms ease, box-shadow 160ms ease; } ._accountRow_13k2n_1121:hover:not(:disabled) { border-color: #b9d1ff; background: #f9fbff; } ._accountRow_13k2n_1121:disabled { opacity: 0.7; cursor: wait; } ._accountRowSelected_13k2n_1195 { border-color: var(--cc-primary); background: #f5f9ff; box-shadow: 0 0 0 1px var(--cc-primary); } ._accountRowDisconnected_13k2n_1207 ._accountAvatar_13k2n_1207 { filter: grayscale(0.35); opacity: 0.85; } ._accountAvatar_13k2n_1207 { width: 36px; height: 36px; display: inline-flex; align-items: center; justify-content: center; border-radius: 50%; background: #f3f6fb; font-size: 17px; } ._accountBody_13k2n_1247 { min-width: 0; display: flex; flex-direction: column; gap: 1px; } ._accountBody_13k2n_1247 strong { overflow: hidden; color: var(--cc-text); font-size: var(--cc-fs-sm); font-weight: 600; white-space: nowrap; text-overflow: ellipsis; } ._accountLabel_13k2n_1289 { overflow: hidden; color: var(--cc-text-2); font-size: 11px; white-space: nowrap; text-overflow: ellipsis; } ._accountStatus_13k2n_1311 { display: inline-flex; align-items: center; gap: 4px; font-size: 11px; font-weight: 600; } ._accountStatusOk_13k2n_1331 { color: var(--cc-success); } ._accountStatusConnect_13k2n_1339 { color: var(--cc-primary); } ._accountStatusPending_13k2n_1347 { color: var(--cc-text-2); } ._accountMissing_13k2n_1355 { color: var(--cc-danger); font-size: 10px; line-height: 1.3; } ._accountCheck_13k2n_1369 { width: 18px; height: 18px; display: inline-flex; align-items: center; justify-content: center; border: 1.5px solid #c9d2df; border-radius: 5px; background: var(--cc-surface); color: #ffffff; font-size: 12px; } ._accountCheckActive_13k2n_1403 { border-color: var(--cc-primary); background: var(--cc-primary); } ._accountsNoMatch_13k2n_1413 { margin: 8px 0 0; color: var(--cc-muted); font-size: 11px; text-align: center; } ._accountsMini_13k2n_1431 { display: flex; flex-direction: column; align-items: center; gap: 10px; padding: 12px 0; } ._accountMiniButton_13k2n_1451 { position: relative; width: 38px; height: 38px; display: inline-flex; align-items: center; justify-content: center; border: 1px solid var(--cc-border); border-radius: 50%; background: #f3f6fb; font-size: 16px; cursor: pointer; } ._accountMiniSelected_13k2n_1491 { border-color: var(--cc-primary); box-shadow: 0 0 0 2px rgba(31, 111, 255, 0.2); } ._accountMiniDisconnected_13k2n_1501 { opacity: 0.5; } /* ====================================================== COMPOSER COLUMN ====================================================== */ ._composerColumn_13k2n_1517 { min-width: 0; display: flex; flex-direction: column; } ._composerScroll_13k2n_1531 { flex: 1; display: flex; flex-direction: column; gap: 14px; padding: 16px 20px 20px; } ._card_13k2n_1553 { min-width: 0; border: 1px solid var(--cc-border); border-radius: var(--cc-radius); background: var(--cc-surface); box-shadow: var(--cc-shadow); } ._infoBanner_13k2n_1575, ._errorBanner_13k2n_1577 { display: flex; align-items: center; gap: 8px; padding: 9px 12px; border-radius: 8px; font-size: var(--cc-fs-xs); } ._infoBanner_13k2n_1575 { border: 1px solid #bfdbfe; background: #eff6ff; color: #1d4ed8; } ._errorBanner_13k2n_1577 { border: 1px solid #fecaca; background: #fef2f2; color: #b91c1c; } ._errorBanner_13k2n_1577>svg { flex-shrink: 0; } ._errorBanner_13k2n_1577>span { flex: 1; } ._errorBanner_13k2n_1577>button { display: inline-flex; padding: 2px; border: 0; background: transparent; color: inherit; cursor: pointer; } /* ---------------- COMPOSER CARD ---------------- */ ._composerCard_13k2n_1673 { overflow: visible; } ._composerCard_13k2n_1673:focus-within { border-color: #9cc0ff; } ._titleField_13k2n_1689 { display: flex; align-items: center; gap: 10px; padding: 10px 14px; border-bottom: 1px solid var(--cc-border); } ._titleField_13k2n_1689 label { flex-shrink: 0; color: var(--cc-text-2); font-size: var(--cc-fs-xs); font-weight: 600; } ._titleField_13k2n_1689 input { width: 100%; min-width: 0; height: 30px; border: 0; outline: 0; background: transparent; color: var(--cc-text); font: inherit; font-size: 14px; font-weight: 600; } ._titleField_13k2n_1689 input::placeholder { color: var(--cc-muted); font-weight: 400; } ._requiredMark_13k2n_1771 { margin-left: 3px; color: var(--cc-danger); } ._aiBriefBanner_13k2n_1783 { display: flex; align-items: center; gap: 8px; margin: 10px 14px 0; padding: 8px 10px; border: 1px dashed #f6c08a; border-radius: 8px; background: #fff8f1; color: #b45309; font-size: var(--cc-fs-xs); } ._aiBriefBanner_13k2n_1783>span { flex: 1; } ._aiBriefBanner_13k2n_1783>button { padding: 0; border: 0; background: transparent; color: #b45309; font-size: var(--cc-fs-xs); font-weight: 700; cursor: pointer; } ._composerTextarea_13k2n_1855 { width: 100%; min-height: 130px; display: block; padding: 12px 14px; border: 0; outline: 0; background: transparent; color: var(--cc-text); font: inherit; font-size: 14px; line-height: 1.55; resize: vertical; } ._composerTextarea_13k2n_1855::placeholder { color: var(--cc-muted); } ._aiActionRow_13k2n_1905 { display: flex; flex-wrap: wrap; gap: 10px; padding: 4px 14px 12px; } ._aiAction_13k2n_1905 { min-height: 30px; display: inline-flex; align-items: center; gap: 7px; padding: 0 10px; border: 1px dashed; border-radius: 6px; background: var(--cc-surface); font-size: var(--cc-fs-xs); font-weight: 500; cursor: pointer; transition: background-color 160ms ease, transform 160ms ease; } ._aiAction_13k2n_1905:active { transform: scale(0.98); } ._aiAction_13k2n_1905 svg { font-size: 15px; } ._aiActionWrite_13k2n_1989 { border-color: #fbbf24; color: var(--cc-text); } ._aiActionWrite_13k2n_1989 svg { color: #f59e0b; } ._aiActionWrite_13k2n_1989:hover { background: #fffbeb; } ._aiActionImage_13k2n_2015 { border-color: #c4b5fd; color: var(--cc-text); } ._aiActionImage_13k2n_2015 svg { color: var(--cc-purple); } ._aiActionImage_13k2n_2015:hover { background: #f5f3ff; } ._aiActionVideo_13k2n_2041 { border-color: #fdba74; color: var(--cc-text); } ._aiActionVideo_13k2n_2041 svg { color: var(--cc-orange); } ._aiActionVideo_13k2n_2041:hover { background: #fff7ed; } ._editorToolbar_13k2n_2067 { min-height: 48px; display: flex; align-items: center; justify-content: space-between; gap: 10px; padding: 8px 14px; border-top: 1px solid var(--cc-border); } ._toolbarLeft_13k2n_2095, ._toolbarRight_13k2n_2097 { display: flex; align-items: center; gap: 7px; } ._toolButton_13k2n_2111 { width: 30px; height: 30px; display: inline-flex; align-items: center; justify-content: center; border: 0; border-radius: 6px; background: #eef2f7; color: #475467; font-size: 15px; cursor: pointer; transition: background-color 160ms ease, color 160ms ease; } ._toolButton_13k2n_2111:hover:not(:disabled), ._toolButtonActive_13k2n_2159 { background: var(--cc-primary-soft); color: var(--cc-primary); } ._toolButton_13k2n_2111:disabled { opacity: 0.5; cursor: not-allowed; } ._modeSwitchButton_13k2n_2179 { min-height: 30px; display: inline-flex; align-items: center; gap: 6px; padding: 0 10px; border: 1px dashed #f9a8d4; border-radius: 6px; background: var(--cc-surface); color: #db2777; font-size: var(--cc-fs-xs); font-weight: 600; cursor: pointer; } ._modeSwitchButton_13k2n_2179:hover { background: #fdf2f8; } ._charCounter_13k2n_2231 { min-width: 70px; color: var(--cc-muted); font-size: 11px; text-align: right; } ._emojiControl_13k2n_2249 { position: relative; } ._emojiPicker_13k2n_2257 { position: absolute; z-index: 40; left: 0; top: calc(100% + 6px); width: 216px; display: grid; grid-template-columns: repeat(6, 1fr); gap: 2px; padding: 8px; border: 1px solid var(--cc-border); border-radius: 10px; background: var(--cc-surface); box-shadow: 0 12px 28px rgba(15, 23, 42, 0.14); } ._emojiPicker_13k2n_2257 button { height: 32px; border: 0; border-radius: 6px; background: transparent; font-size: 18px; cursor: pointer; } ._emojiPicker_13k2n_2257 button:hover { background: #f1f4f9; } /* ---------------- HASHTAGS ---------------- */ ._hashtagSection_13k2n_2343 { padding: 0 14px 14px; } ._hashtagHeader_13k2n_2351 { display: flex; align-items: center; justify-content: space-between; margin-bottom: 6px; } ._hashtagHeader_13k2n_2351 span { color: var(--cc-text); font-size: var(--cc-fs-xs); font-weight: 600; } ._hashtagHeader_13k2n_2351 small { color: var(--cc-muted); font-size: 11px; } ._hashtagEditor_13k2n_2393 { min-height: 42px; display: flex; align-items: center; flex-wrap: wrap; gap: 6px; padding: 6px 7px; border: 1px solid var(--cc-border); border-radius: 8px; } ._hashtagChip_13k2n_2423 { min-height: 27px; display: inline-flex; align-items: center; gap: 3px; padding: 0 4px 0 9px; border-radius: 7px; background: #eef4ff; color: var(--cc-primary); font-size: var(--cc-fs-xs); font-weight: 600; } ._hashtagChip_13k2n_2423 button { width: 18px; height: 18px; display: inline-flex; align-items: center; justify-content: center; padding: 0; border: 0; background: transparent; color: var(--cc-muted); cursor: pointer; } ._hashtagChip_13k2n_2423 button:hover { color: var(--cc-danger); } ._addHashtagBox_13k2n_2505 { min-height: 27px; display: inline-flex; align-items: center; overflow: hidden; border: 1px dashed #c9d3e2; border-radius: 7px; } ._addHashtagBox_13k2n_2505 input { width: 120px; height: 25px; padding: 0 8px; border: 0; outline: 0; background: transparent; color: var(--cc-text); font: inherit; font-size: var(--cc-fs-xs); } ._addHashtagBox_13k2n_2505 button { height: 25px; padding: 0 9px; border: 0; border-left: 1px solid var(--cc-border); background: var(--cc-surface); color: var(--cc-primary); font-size: var(--cc-fs-xs); font-weight: 600; cursor: pointer; } ._addHashtagBox_13k2n_2505 button:disabled { color: var(--cc-muted); cursor: not-allowed; } /* ---------------- CARD HEADERS ---------------- */ ._cardHeader_13k2n_2609, ._cardHeaderButton_13k2n_2611 { width: 100%; display: flex; align-items: center; justify-content: space-between; gap: 12px; padding: 14px 16px 10px; } ._cardHeaderButton_13k2n_2611 { padding-bottom: 14px; border: 0; background: transparent; text-align: left; cursor: pointer; } ._cardHeaderTitle_13k2n_2659 { min-width: 0; display: flex; align-items: center; gap: 10px; } ._cardHeaderTitle_13k2n_2659 h2 { margin: 0; color: var(--cc-text); font-size: 14px; font-weight: 600; } ._cardHeaderTitle_13k2n_2659 p { margin: 2px 0 0; color: var(--cc-text-2); font-size: 11px; } ._cardHeaderIcon_13k2n_2711 { width: 30px; height: 30px; flex-shrink: 0; display: inline-flex; align-items: center; justify-content: center; border-radius: 8px; font-size: 15px; } ._cardHeaderIconBlue_13k2n_2741 { background: var(--cc-primary-soft); color: var(--cc-primary); } ._cardHeaderIconGreen_13k2n_2751 { background: #e8f8ee; color: var(--cc-success); } ._collapseCaret_13k2n_2761 { flex-shrink: 0; color: var(--cc-text-2); font-size: 18px; transition: transform 180ms ease; } ._collapseCaretOpen_13k2n_2781 { transform: rotate(180deg); } /* ---------------- MEDIA CARD ---------------- */ ._mediaCard_13k2n_2793 { padding-bottom: 16px; } ._mediaCard_13k2n_2793> :last-child:not(._cardHeader_13k2n_2609) { margin: 0 16px; } ._mediaRequiredTag_13k2n_2809 { flex-shrink: 0; display: inline-flex; align-items: center; gap: 5px; padding: 4px 9px; border-radius: 999px; background: #fff7ed; color: #c2410c; font-size: 11px; font-weight: 600; } ._mediaRequiredTagOk_13k2n_2847 { background: #ecfdf3; color: var(--cc-success); } ._dropZone_13k2n_2857 { min-height: 190px; display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 6px; padding: 22px 16px; border: 1.5px dashed #cbd6e6; border-radius: 10px; background: #fbfcff; text-align: center; transition: border-color 160ms ease, background-color 160ms ease; } ._dropZoneActive_13k2n_2905 { border-color: var(--cc-primary); background: var(--cc-primary-soft); } ._dropZoneIcon_13k2n_2915 { color: var(--cc-primary); font-size: 34px; } ._dropZone_13k2n_2857>strong { color: var(--cc-text); font-size: 15px; font-weight: 600; } ._dropZone_13k2n_2857>strong ._linkButton_13k2n_473 { font-size: 15px; } ._dropZone_13k2n_2857>span { color: var(--cc-text-2); font-size: var(--cc-fs-xs); } ._dropZoneSources_13k2n_2961 { display: flex; align-items: center; flex-wrap: wrap; justify-content: center; gap: 10px; margin-top: 12px; } ._sourceButton_13k2n_2983 { min-height: 34px; display: inline-flex; align-items: center; gap: 7px; padding: 0 12px; border: 0; border-radius: 7px; background: #eef3fb; color: var(--cc-text); font-size: var(--cc-fs-xs); font-weight: 500; cursor: pointer; } ._sourceButton_13k2n_2983:hover { background: #e3ebf8; } ._sourceButton_13k2n_2983 svg { color: var(--cc-primary); font-size: 15px; } ._sourceButtonImage_13k2n_3045 { background: #f3efff; } ._sourceButtonImage_13k2n_3045 svg { color: var(--cc-purple); } ._sourceButtonImage_13k2n_3045:hover { background: #ebe4ff; } ._sourceButtonVideo_13k2n_3069 { background: #fff3e8; } ._sourceButtonVideo_13k2n_3069 svg { color: var(--cc-orange); } ._sourceButtonVideo_13k2n_3069:hover { background: #ffe9d5; } ._sourceDivider_13k2n_3093 { width: 1px; height: 24px; background: var(--cc-border-strong); } /* Uploaded / existing media */ ._uploadedMedia_13k2n_3111 { border: 1px solid var(--cc-border); border-radius: 10px; background: #fbfcff; } ._uploadedMediaMain_13k2n_3125 { display: flex; align-items: center; gap: 12px; padding: 10px; } ._uploadedThumb_13k2n_3143 { position: relative; width: 96px; height: 72px; flex-shrink: 0; overflow: hidden; border-radius: 8px; background: #0f172a; } ._uploadedThumb_13k2n_3143 img, ._uploadedThumb_13k2n_3143 video { width: 100%; height: 100%; display: block; object-fit: cover; } ._uploadedThumbPlay_13k2n_3193 { position: absolute; inset: 0; display: flex; align-items: center; justify-content: center; color: #ffffff; font-size: 22px; background: rgba(15, 23, 42, 0.25); pointer-events: none; } ._uploadedInfo_13k2n_3227 { flex: 1; min-width: 0; display: flex; flex-direction: column; gap: 3px; } ._uploadedInfo_13k2n_3227 strong { overflow: hidden; color: var(--cc-text); font-size: var(--cc-fs-sm); font-weight: 600; white-space: nowrap; text-overflow: ellipsis; } ._uploadedInfo_13k2n_3227 span { color: var(--cc-text-2); font-size: var(--cc-fs-xs); } ._uploadedInfo_13k2n_3227 small { display: inline-flex; align-items: center; gap: 4px; color: var(--cc-success); font-size: 11px; } ._uploadedActions_13k2n_3305 { display: flex; align-items: center; gap: 8px; } ._thumbnailRow_13k2n_3319 { display: flex; align-items: center; justify-content: space-between; gap: 12px; padding: 10px; border-top: 1px dashed var(--cc-border-strong); } ._thumbnailRow_13k2n_3319>div:first-child strong, ._thumbnailRow_13k2n_3319>div:first-child span { display: block; } ._thumbnailRow_13k2n_3319>div:first-child strong { color: var(--cc-text); font-size: var(--cc-fs-xs); font-weight: 600; } ._thumbnailRow_13k2n_3319>div:first-child span { margin-top: 2px; color: var(--cc-muted); font-size: 11px; } ._thumbnailAdd_13k2n_3383 { min-height: 32px; display: inline-flex; align-items: center; gap: 6px; padding: 0 12px; border: 1px dashed var(--cc-primary); border-radius: 7px; background: var(--cc-surface); color: var(--cc-primary); font-size: var(--cc-fs-xs); font-weight: 600; cursor: pointer; } ._thumbnailAdd_13k2n_3383:hover { background: var(--cc-primary-soft); } ._thumbnailSelected_13k2n_3435 { min-width: 0; max-width: 260px; display: flex; align-items: center; gap: 8px; padding: 4px 4px 4px 4px; border: 1px solid var(--cc-border); border-radius: 8px; background: var(--cc-surface); } ._thumbnailSelected_13k2n_3435 img { width: 44px; height: 32px; flex-shrink: 0; border-radius: 5px; object-fit: cover; } ._thumbnailSelected_13k2n_3435 span { min-width: 0; overflow: hidden; color: var(--cc-text); font-size: 11px; white-space: nowrap; text-overflow: ellipsis; } ._thumbnailSelected_13k2n_3435 button { width: 24px; height: 24px; flex-shrink: 0; display: inline-flex; align-items: center; justify-content: center; border: 0; border-radius: 6px; background: transparent; color: var(--cc-muted); cursor: pointer; } ._thumbnailSelected_13k2n_3435 button:hover { background: #fef2f2; color: var(--cc-danger); } /* AI media card */ ._aiMediaCard_13k2n_3569 { display: grid; grid-template-columns: 42px minmax(0, 1fr) auto; align-items: start; gap: 12px; padding: 14px; border: 1px dashed; border-radius: 10px; } ._aiMediaCardImage_13k2n_3595 { border-color: #c4b5fd; background: #faf8ff; } ._aiMediaCardVideo_13k2n_3605 { border-color: #fdba74; background: #fffaf5; } ._aiMediaIcon_13k2n_3615 { width: 42px; height: 42px; display: inline-flex; align-items: center; justify-content: center; border-radius: 10px; background: var(--cc-surface); font-size: 19px; } ._aiMediaCardImage_13k2n_3595 ._aiMediaIcon_13k2n_3615 { color: var(--cc-purple); } ._aiMediaCardVideo_13k2n_3605 ._aiMediaIcon_13k2n_3615 { color: var(--cc-orange); } ._aiMediaBody_13k2n_3661 { min-width: 0; } ._aiMediaTitleRow_13k2n_3669 { display: flex; align-items: center; gap: 8px; } ._aiMediaTitleRow_13k2n_3669 strong { color: var(--cc-text); font-size: var(--cc-fs-sm); font-weight: 600; } ._aiBadge_13k2n_3697 { display: inline-flex; align-items: center; gap: 3px; padding: 2px 7px; border-radius: 999px; background: linear-gradient(90deg, #ede9fe, #ffedd5); color: #7c3aed; font-size: 10px; font-weight: 700; } ._aiMediaBody_13k2n_3661 p { display: -webkit-box; margin: 6px 0 0; overflow: hidden; color: var(--cc-text-2); font-size: var(--cc-fs-xs); line-height: 1.5; -webkit-box-orient: vertical; -webkit-line-clamp: 3; } ._aiMediaChips_13k2n_3763 { display: flex; flex-wrap: wrap; gap: 6px; margin-top: 10px; } ._aiMediaChips_13k2n_3763 span { display: inline-flex; align-items: center; gap: 5px; padding: 3px 8px; border: 1px solid var(--cc-border); border-radius: 999px; background: var(--cc-surface); color: var(--cc-text); font-size: 11px; } ._aiMediaActions_13k2n_3815 { display: flex; align-items: center; gap: 8px; } /* ---------------- POSTING SCHEDULE ---------------- */ ._scheduleCard_13k2n_3833 { overflow: hidden; } ._scheduleBody_13k2n_3841 { display: flex; flex-direction: column; gap: 14px; padding: 0 16px 16px; } ._scheduleRow_13k2n_3859 { display: grid; grid-template-columns: 140px minmax(0, 1fr); align-items: center; gap: 12px; } ._scheduleRowLabel_13k2n_3875 { color: var(--cc-text); font-size: var(--cc-fs-sm); } ._whenOptions_13k2n_3887 { display: flex; flex-wrap: wrap; gap: 8px 28px; } ._radioOption_13k2n_3901 { position: relative; display: inline-flex; align-items: center; gap: 9px; color: var(--cc-text); font-size: var(--cc-fs-sm); cursor: pointer; } ._radioOption_13k2n_3901 input { position: absolute; opacity: 0; pointer-events: none; } ._radioDot_13k2n_3945 { width: 18px; height: 18px; flex-shrink: 0; border: 1.5px solid #b9c3d3; border-radius: 50%; background: var(--cc-surface); transition: border-color 160ms ease, border-width 160ms ease; } ._radioOptionActive_13k2n_3977 ._radioDot_13k2n_3945 { border: 5px solid var(--cc-primary); } ._radioOptionActive_13k2n_3977 { font-weight: 600; } ._radioOption_13k2n_3901 input:focus-visible+._radioDot_13k2n_3945 { box-shadow: 0 0 0 3px rgba(31, 111, 255, 0.2); } ._publishDateCard_13k2n_4001 { width: fit-content; min-width: 220px; display: flex; align-items: center; justify-content: space-between; gap: 24px; padding: 10px 14px; border: 1px solid transparent; border-radius: 8px; background: #f1f4f9; text-align: left; cursor: pointer; } ._publishDateCard_13k2n_4001:hover { border-color: var(--cc-primary); } ._publishDateCard_13k2n_4001 strong, ._publishDateCard_13k2n_4001 small { display: block; } ._publishDateCard_13k2n_4001 strong { color: var(--cc-text); font-size: var(--cc-fs-sm); font-weight: 600; } ._publishDateCard_13k2n_4001 small { margin-top: 2px; color: var(--cc-text-2); font-size: var(--cc-fs-xs); } ._publishDateCard_13k2n_4001>svg { color: var(--cc-text); } ._timezoneSelect_13k2n_4101 { width: fit-content; min-width: 220px; height: 36px; display: inline-flex; align-items: center; gap: 8px; padding: 0 10px; border: 1px solid var(--cc-border-strong); border-radius: 8px; background: var(--cc-surface); color: var(--cc-text-2); } ._timezoneSelect_13k2n_4101 select { flex: 1; border: 0; outline: 0; background: transparent; color: var(--cc-text); font: inherit; font-size: var(--cc-fs-xs); appearance: none; cursor: pointer; } ._publishNote_13k2n_4171 { display: flex; align-items: center; gap: 7px; padding: 8px 10px; border: 1px solid #ccefdc; border-radius: 8px; background: #effcf4; color: #168a4a; font-size: var(--cc-fs-xs); } /* ---------------- FOOTER ---------------- */ ._composerFooter_13k2n_4209 { position: sticky; bottom: 0; z-index: 20; min-height: 60px; display: flex; align-items: center; justify-content: space-between; gap: 12px; padding: 10px 20px; border-top: 1px solid var(--cc-border); background: rgba(255, 255, 255, 0.97); backdrop-filter: blur(8px); } ._uploadProgress_13k2n_4253 { position: absolute; top: -1px; left: 0; right: 0; height: 3px; background: #e5edff; } ._uploadProgress_13k2n_4253 span { height: 100%; display: block; background: var(--cc-primary); transition: width 200ms ease; } ._footerStatus_13k2n_4295 { display: inline-flex; align-items: center; gap: 6px; color: var(--cc-text-2); font-size: var(--cc-fs-xs); } ._footerStatus_13k2n_4295 svg { color: var(--cc-success); } ._footerActions_13k2n_4325 { display: flex; align-items: center; gap: 9px; } /* ====================================================== PREVIEW PANE ====================================================== */ ._previewPane_13k2n_4347 { min-width: 0; border-left: 1px solid var(--cc-border); background: var(--cc-surface); } ._previewHeader_13k2n_4363 { min-height: 52px; display: flex; align-items: center; justify-content: space-between; gap: 10px; padding: 8px 16px; border-bottom: 1px solid var(--cc-border); } ._previewHeader_13k2n_4363 h3 { margin: 0; color: var(--cc-text); font-size: 15px; font-weight: 600; } ._deviceToggle_13k2n_4409 { display: inline-flex; padding: 3px; border: 1px solid var(--cc-border); border-radius: 8px; background: #f6f8fb; } ._deviceToggle_13k2n_4409 button { width: 32px; height: 28px; display: inline-flex; align-items: center; justify-content: center; border: 0; border-radius: 6px; background: transparent; color: var(--cc-text-2); cursor: pointer; } ._deviceToggle_13k2n_4409 ._deviceActive_13k2n_4465 { background: var(--cc-surface); color: var(--cc-primary); box-shadow: 0 1px 3px rgba(15, 23, 42, 0.12); } ._previewBody_13k2n_4479 { position: sticky; top: 0; padding: 14px 16px 20px; } ._previewTabs_13k2n_4493 { display: flex; gap: 6px; overflow-x: auto; padding-bottom: 2px; scrollbar-width: thin; } ._previewTab_13k2n_4493 { min-height: 32px; flex-shrink: 0; display: inline-flex; align-items: center; gap: 6px; padding: 0 11px; border: 1px solid var(--cc-border); border-radius: 999px; background: var(--cc-surface); color: var(--cc-text-2); font-size: var(--cc-fs-xs); cursor: pointer; } ._previewTabActive_13k2n_4563 { border-color: var(--cc-primary); background: var(--cc-primary-soft); color: var(--cc-text); font-weight: 600; } ._previewCard_13k2n_4579 { width: 100%; margin: 12px auto 0; overflow: hidden; border: 1px solid var(--cc-border); border-radius: 10px; background: var(--cc-surface); box-shadow: 0 6px 18px rgba(15, 23, 42, 0.05); transition: max-width 200ms ease; } ._previewCardMobile_13k2n_4613 { max-width: 290px; border-radius: 18px; } ._previewProfile_13k2n_4625 { min-height: 52px; display: flex; align-items: center; gap: 9px; padding: 10px 12px; } ._previewAvatar_13k2n_4647 { width: 34px; height: 34px; flex-shrink: 0; display: inline-flex; align-items: center; justify-content: center; border-radius: 50%; background: #fff1f2; color: var(--cc-danger); font-size: var(--cc-fs-sm); font-weight: 700; } ._previewProfile_13k2n_4625>div:nth-child(2) { flex: 1; min-width: 0; } ._previewProfile_13k2n_4625 strong, ._previewProfile_13k2n_4625 span { display: block; } ._previewProfile_13k2n_4625 strong { overflow: hidden; color: var(--cc-text); font-size: var(--cc-fs-sm); white-space: nowrap; text-overflow: ellipsis; } ._previewProfile_13k2n_4625 span { margin-top: 2px; color: var(--cc-muted); font-size: 11px; } ._previewProfile_13k2n_4625>button { border: 0; background: transparent; color: var(--cc-text); cursor: pointer; } ._previewCopy_13k2n_4761 { max-height: 260px; overflow-y: auto; padding: 0 12px 10px; color: var(--cc-text); font-size: var(--cc-fs-sm); line-height: 1.5; white-space: pre-wrap; overflow-wrap: anywhere; } ._previewVisual_13k2n_4793 { width: 100%; display: flex; align-items: center; justify-content: center; overflow: hidden; background: #f3f5f9; } ._previewVisual_13k2n_4793 img, ._previewVisual_13k2n_4793 video { width: 100%; max-height: 360px; display: block; object-fit: contain; } ._previewVisual_13k2n_4793 video { background: #000000; } ._previewAiPlaceholder_13k2n_4845 { max-height: 360px; flex-direction: column; gap: 6px; padding: 18px; background: radial-gradient(circle at 75% 30%, rgba(139, 92, 246, 0.35), transparent 40%), linear-gradient(145deg, #1e1b4b, #312e81); color: #ffffff; text-align: center; } ._previewAiVideo_13k2n_4879 { background: radial-gradient(circle at 70% 35%, rgba(249, 115, 22, 0.35), transparent 40%), linear-gradient(145deg, #0b1220, #1f2a44); } ._previewAiIcon_13k2n_4891 { width: 46px; height: 46px; display: inline-flex; align-items: center; justify-content: center; border: 2px solid rgba(255, 255, 255, 0.6); border-radius: 50%; font-size: 20px; } ._previewAiPlaceholder_13k2n_4845 strong { font-size: var(--cc-fs-sm); } ._previewAiPlaceholder_13k2n_4845 small { color: rgba(255, 255, 255, 0.75); font-size: 11px; } ._previewActions_13k2n_4939 { min-height: 42px; display: grid; align-items: center; padding: 4px 6px; border-top: 1px solid var(--cc-border); } ._threeActions_13k2n_4961 { grid-template-columns: repeat(3, minmax(0, 1fr)); } ._fourActions_13k2n_4969 { grid-template-columns: repeat(4, minmax(0, 1fr)); } ._instagramActions_13k2n_4977 { display: flex; justify-content: space-between; } ._instagramLeftActions_13k2n_4987 { display: flex; gap: 6px; } ._labeledSocialAction_13k2n_4999, ._socialIconButton_13k2n_5001 { min-height: 32px; display: inline-flex; align-items: center; justify-content: center; gap: 5px; border: 0; border-radius: 6px; background: transparent; color: var(--cc-text-2); font-size: var(--cc-fs-xs); cursor: pointer; } ._socialIconButton_13k2n_5001 { min-width: 32px; } ._labeledSocialAction_13k2n_4999:hover, ._socialIconButton_13k2n_5001:hover { background: #f1f4f9; color: var(--cc-primary); } ._previewLimit_13k2n_5061 { display: flex; align-items: center; justify-content: center; gap: 7px; margin-top: 10px; padding: 7px 10px; border: 1px solid var(--cc-border); border-radius: 8px; color: var(--cc-text-2); font-size: 11px; } ._previewLimitOver_13k2n_5097 { border-color: #fecaca; background: #fef2f2; color: var(--cc-danger); } ._previewEmpty_13k2n_5109 p { margin: 14px 0 0; color: var(--cc-muted); font-size: var(--cc-fs-xs); text-align: center; } ._previewEmptyCard_13k2n_5127 { display: flex; align-items: center; gap: 10px; padding: 14px; border: 1px solid var(--cc-border); border-radius: 10px; } ._previewEmptyAvatar_13k2n_5151 { width: 36px; height: 36px; flex-shrink: 0; display: inline-flex; align-items: center; justify-content: center; border-radius: 50%; background: #eef1f5; color: #a3adbd; font-size: 18px; } ._previewEmptyCard_13k2n_5127 strong, ._previewEmptyCard_13k2n_5127 span { display: block; } ._previewEmptyCard_13k2n_5127 strong { color: var(--cc-text); font-size: var(--cc-fs-sm); } ._previewEmptyCard_13k2n_5127 span { margin-top: 2px; color: var(--cc-text-2); font-size: 11px; } /* ====================================================== DRAWERS (shared) ====================================================== */ ._drawerOverlay_13k2n_5233 { position: fixed; inset: 0; z-index: 1300; display: flex; justify-content: flex-end; background: rgba(15, 23, 42, 0.32); animation: _ccFadeIn_13k2n_1 160ms ease; } @keyframes _ccFadeIn_13k2n_1 { from { opacity: 0; } to { opacity: 1; } } @keyframes _ccSlideIn_13k2n_1 { from { transform: translateX(32px); opacity: 0.6; } to { transform: translateX(0); opacity: 1; } } /* ====================================================== AI CHAT DRAWER ====================================================== */ ._aiDrawer_13k2n_5311 { width: min(1010px, 100%); height: 100%; display: flex; flex-direction: column; background: var(--cc-surface, #ffffff); color: var(--cc-text, #1e2633); font-size: 13px; box-shadow: -18px 0 40px rgba(15, 23, 42, 0.16); animation: _ccSlideIn_13k2n_1 220ms ease; transition: width 220ms ease; } ._aiDrawer_13k2n_5311 *, ._aiDrawer_13k2n_5311 *::before, ._aiDrawer_13k2n_5311 *::after, ._scheduleDrawer_13k2n_5355 *, ._scheduleDrawer_13k2n_5355 *::before, ._scheduleDrawer_13k2n_5355 *::after { box-sizing: border-box; } ._aiDrawerExpanded_13k2n_5367 { width: 100%; } ._aiDrawerHeader_13k2n_5375 { min-height: 64px; display: flex; align-items: center; justify-content: space-between; gap: 12px; padding: 10px 18px; border-bottom: 1px solid #edf0f5; } ._aiDrawerTitle_13k2n_5403 { display: flex; align-items: center; gap: 10px; } ._aiDrawerTitle_13k2n_5403 strong { font-size: 16px; font-weight: 600; } ._aiBotIcon_13k2n_5427 { width: 36px; height: 36px; display: inline-flex; align-items: center; justify-content: center; border-radius: 50%; background: #e8f1ff; color: #1f6fff; font-size: 17px; } ._aiDrawerHeaderActions_13k2n_5459 { display: flex; align-items: center; gap: 6px; } ._aiDrawerBody_13k2n_5473 { flex: 1; overflow-y: auto; background-color: #f7f9fd; background-image: linear-gradient(180deg, #eaf1ff 0%, rgba(247, 249, 253, 0) 45%), radial-gradient(#d6deea 1px, transparent 1px); background-size: 100% 100%, 22px 22px; } ._aiDrawerInner_13k2n_5501 { width: min(760px, 100%); margin: 0 auto; padding: 12vh 20px 40px; } ._aiGreeting_13k2n_5515 { margin: 0 0 26px; color: #1e2633; font-size: 24px; font-weight: 600; text-align: center; } ._aiGreeting_13k2n_5515 span { color: #1e2633; } ._aiPromptCard_13k2n_5543 { position: relative; padding: 14px; border: 1px solid #eceff5; border-radius: 18px; background: #ffffff; box-shadow: -10px 0 32px rgba(244, 114, 182, 0.14), 10px 0 32px rgba(56, 189, 248, 0.14), 0 14px 34px rgba(15, 23, 42, 0.06); } ._aiChipRow_13k2n_5575 { display: flex; align-items: center; flex-wrap: wrap; gap: 8px; } ._aiModeChip_13k2n_5591 { min-height: 34px; display: inline-flex; align-items: center; gap: 7px; padding: 0 12px; border: 1px dashed; border-radius: 8px; background: #ffffff; color: #1e2633; font-size: 13px; font-weight: 500; cursor: pointer; } ._aiModeChip_13k2n_5591>svg { font-size: 15px; } ._aiModeChip_write_13k2n_5643 { border-color: #fbbf24; } ._aiModeChip_write_13k2n_5643>svg { color: #f59e0b; } ._aiModeChip_image_13k2n_5659 { border-color: #c4b5fd; } ._aiModeChip_image_13k2n_5659>svg { color: #8b5cf6; } ._aiModeChip_video_13k2n_5675 { border-color: #fdba74; } ._aiModeChip_video_13k2n_5675>svg { color: #f97316; } ._aiModeChipActive_13k2n_5691 { font-weight: 600; cursor: default; } ._aiModeChipActive_13k2n_5691._aiModeChip_write_13k2n_5643 { background: #fffbeb; } ._aiModeChipActive_13k2n_5691._aiModeChip_image_13k2n_5659 { background: #f5f3ff; } ._aiModeChipActive_13k2n_5691._aiModeChip_video_13k2n_5675 { background: #fff7ed; } ._aiModeChipActive_13k2n_5691>button { width: 20px; height: 20px; display: inline-flex; align-items: center; justify-content: center; margin-left: 2px; padding: 0; border: 0; border-radius: 5px; background: transparent; color: #5b6475; cursor: pointer; } ._aiModeChipActive_13k2n_5691>button:hover { background: rgba(15, 23, 42, 0.06); } ._aiPill_13k2n_5775 { position: relative; min-height: 34px; display: inline-flex; align-items: center; gap: 7px; padding: 0 11px; border: 1px solid #e3e8ef; border-radius: 8px; background: #ffffff; color: #1e2633; font-size: 13px; font-weight: 500; cursor: pointer; } ._aiPill_13k2n_5775:hover { border-color: #c7d3e5; } ._aiPill_13k2n_5775>svg { flex-shrink: 0; color: #344054; font-size: 15px; } ._aiPill_13k2n_5775 select { padding-right: 18px; border: 0; outline: 0; background: transparent; color: #1e2633; font: inherit; appearance: none; cursor: pointer; } ._aiPill_13k2n_5775 ._aiPillCaret_13k2n_5875 { position: absolute; right: 9px; font-size: 13px; pointer-events: none; } ._aiPillActive_13k2n_5893 { border-color: #bcd3ff; background: #f1f6ff; color: #1f6fff; } ._aiPillActive_13k2n_5893>svg { color: #1f6fff; } ._aiPillInput_13k2n_5913 { cursor: text; } ._aiPillInput_13k2n_5913 input { width: 120px; border: 0; outline: 0; background: transparent; color: #1e2633; font: inherit; } ._aiTextarea_13k2n_5945 { width: 100%; min-height: 70px; display: block; margin-top: 12px; padding: 4px 2px; border: 0; outline: 0; background: transparent; color: #1e2633; font: inherit; font-size: 14px; line-height: 1.55; resize: vertical; } ._aiTextarea_13k2n_5945::placeholder { color: #98a2b3; } ._aiError_13k2n_5997 { display: flex; align-items: center; gap: 6px; margin-top: 6px; color: #e5484d; font-size: 12px; } ._aiPromptFooter_13k2n_6023 { display: flex; align-items: center; justify-content: space-between; gap: 12px; margin-top: 10px; } ._aiPromptTools_13k2n_6043 { min-width: 0; display: flex; align-items: center; gap: 10px; } ._aiToolButton_13k2n_6061 { width: 34px; height: 34px; flex-shrink: 0; display: inline-flex; align-items: center; justify-content: center; border: 0; border-radius: 8px; background: #eef2f7; color: #344054; font-size: 16px; cursor: pointer; } ._aiToolButton_13k2n_6061:hover { background: #e3eaf5; } ._aiHint_13k2n_6111 { min-width: 0; color: #98a2b3; font-size: 12px; } ._aiPromptSend_13k2n_6127 { flex-shrink: 0; display: flex; align-items: center; gap: 10px; } ._aiCharCount_13k2n_6145 { color: #98a2b3; font-size: 11px; } ._aiSendButton_13k2n_6157 { width: 42px; height: 42px; display: inline-flex; align-items: center; justify-content: center; border: 0; border-radius: 50%; background: #1f6fff; color: #ffffff; font-size: 18px; cursor: pointer; transition: background-color 160ms ease, transform 160ms ease; } ._aiSendButton_13k2n_6157:hover:not(:disabled) { background: #1559d6; transform: translateY(-1px); } ._aiSendButton_13k2n_6157:disabled { background: #a9c4f7; cursor: not-allowed; } ._aiSuggestions_13k2n_6223 { display: flex; flex-wrap: wrap; justify-content: center; gap: 10px; margin-top: 26px; } ._aiSuggestionChip_13k2n_6243 { min-height: 36px; max-width: 100%; display: inline-flex; align-items: center; gap: 7px; padding: 0 14px; border: 1px solid #e3e8ef; border-radius: 999px; background: #ffffff; color: #1e2633; font-size: 13px; cursor: pointer; } ._aiSuggestionChip_13k2n_6243:hover { border-color: #bcd3ff; color: #1f6fff; } ._aiSuggestionChip_13k2n_6243>svg { flex-shrink: 0; color: #1f6fff; } /* ====================================================== SCHEDULE DRAWER ====================================================== */ ._scheduleDrawer_13k2n_5355 { width: min(500px, 100%); height: 100%; display: flex; flex-direction: column; background: #ffffff; color: #1e2633; font-size: 13px; box-shadow: -18px 0 40px rgba(15, 23, 42, 0.16); animation: _ccSlideIn_13k2n_1 220ms ease; } ._scheduleDrawerHeader_13k2n_6351 { min-height: 64px; display: flex; align-items: center; justify-content: space-between; gap: 12px; padding: 10px 16px; border-bottom: 1px solid #edf0f5; } ._scheduleDrawerTitle_13k2n_6379 { display: flex; align-items: center; gap: 10px; } ._scheduleDrawerTitle_13k2n_6379 h2 { margin: 0; font-size: 16px; font-weight: 600; } ._scheduleDrawerIcon_13k2n_6407 { width: 32px; height: 32px; display: inline-flex; align-items: center; justify-content: center; border-radius: 8px; background: #e8f8ee; color: #16a34a; font-size: 16px; } ._scheduleDrawerHeaderRight_13k2n_6439 { display: flex; align-items: center; gap: 6px; } ._scheduleTimezone_13k2n_6453 { display: inline-flex; align-items: center; gap: 6px; color: #344054; font-size: 12px; } ._scheduleTimezone_13k2n_6453 select { border: 0; outline: 0; background: transparent; color: #344054; font: inherit; text-align: right; appearance: none; cursor: pointer; } ._scheduleDrawerBody_13k2n_6503 { flex: 1; overflow-y: auto; padding: 18px 20px; } ._scheduleDrawerSubtitle_13k2n_6519 { margin: 0 0 14px; font-size: 13px; font-weight: 600; } ._calendar_13k2n_6533 { padding-bottom: 14px; border-bottom: 1px solid #edf0f5; } ._calendarNav_13k2n_6545 { display: flex; align-items: center; justify-content: space-between; margin-bottom: 10px; padding: 0 6px; } ._calendarNav_13k2n_6545 strong { color: #344054; font-size: 15px; font-weight: 500; } ._calendarNav_13k2n_6545>div { display: flex; gap: 4px; } ._calendarNav_13k2n_6545 button { width: 28px; height: 28px; display: inline-flex; align-items: center; justify-content: center; border: 0; border-radius: 6px; background: transparent; color: #5b6475; font-size: 16px; cursor: pointer; } ._calendarNav_13k2n_6545 button:hover { background: #f1f4f9; } ._calendarGrid_13k2n_6635 { display: grid; grid-template-columns: repeat(7, minmax(0, 1fr)); row-gap: 2px; } ._calendarWeekday_13k2n_6649 { padding: 8px 0; color: #344054; font-size: 12px; font-weight: 500; text-align: center; } ._calendarDay_13k2n_6669 { height: 40px; border: 0; border-radius: 6px; background: transparent; color: #344054; font-size: 13px; cursor: pointer; } ._calendarDay_13k2n_6669:hover:not(:disabled) { background: #eef4ff; } ._calendarDay_13k2n_6669:disabled { background: #f2f4f7; color: #c0c7d2; cursor: not-allowed; } ._calendarDayOutside_13k2n_6719:not(:disabled) { color: #b0b8c6; } ._calendarDayToday_13k2n_6727:not(._calendarDaySelected_13k2n_6727) { box-shadow: inset 0 0 0 1px #9cc0ff; } ._calendarDaySelected_13k2n_6727, ._calendarDaySelected_13k2n_6727:hover:not(:disabled) { background: #1f6fff; color: #ffffff; font-weight: 600; } ._timePickerRow_13k2n_6751 { display: flex; align-items: center; justify-content: center; gap: 8px; margin-top: 16px; } ._timeSelect_13k2n_6771 { position: relative; display: inline-flex; align-items: center; } ._timeSelect_13k2n_6771 select { width: 62px; height: 36px; padding: 0 24px 0 10px; border: 1px solid #d5dbe5; border-radius: 7px; background: #ffffff; color: #1e2633; font: inherit; appearance: none; cursor: pointer; } ._timeSelectWide_13k2n_6821 select { width: 80px; } ._timeSelect_13k2n_6771>svg { position: absolute; right: 8px; color: #5b6475; font-size: 13px; pointer-events: none; } ._timeColon_13k2n_6851 { color: #5b6475; font-weight: 600; } ._scheduleSelection_13k2n_6863 { margin-top: 18px; padding: 12px 16px; border: 1px solid #1f6fff; border-radius: 8px; color: #1f6fff; font-size: 14px; } ._inlineError_13k2n_6887 { display: flex; align-items: center; gap: 6px; margin-top: 10px; color: #e5484d; font-size: 12px; } ._scheduleDrawerFooter_13k2n_6913 { display: flex; align-items: center; justify-content: flex-end; gap: 9px; padding: 12px 16px; border-top: 1px solid #edf0f5; } ._scheduleDrawerFooter_13k2n_6913 ._btnPrimary_13k2n_205, ._scheduleDrawerFooter_13k2n_6913 ._btnSecondary_13k2n_207 { font-size: 13px; } ._scheduleDrawerFooter_13k2n_6913 ._btnPrimary_13k2n_205 { border-color: #1f6fff; background: #1f6fff; } ._scheduleDrawerFooter_13k2n_6913 ._btnPrimary_13k2n_205:hover { background: #1559d6; } ._scheduleDrawerFooter_13k2n_6913 ._btnSecondary_13k2n_207 { border-color: #d5dbe5; background: #ffffff; color: #1e2633; } /* ====================================================== RESPONSIVE ====================================================== */ @media (max-width: 1320px) { ._workspace_13k2n_735 { grid-template-columns: 240px minmax(0, 1fr) 330px; } ._workspaceCollapsed_13k2n_751 { grid-template-columns: 64px minmax(0, 1fr) 330px; } } @media (max-width: 1100px) { ._workspace_13k2n_735, ._workspaceCollapsed_13k2n_751 { grid-template-columns: 240px minmax(0, 1fr); } ._workspaceCollapsed_13k2n_751 { grid-template-columns: 64px minmax(0, 1fr); } ._previewPane_13k2n_4347 { grid-column: 1 / -1; border-top: 1px solid var(--cc-border); border-left: 0; } ._previewBody_13k2n_4479 { position: static; max-width: 560px; margin: 0 auto; } ._scheduleRow_13k2n_3859 { grid-template-columns: 1fr; gap: 8px; } ._scheduleRowLabel_13k2n_3875:empty { display: none; } } @media (max-width: 760px) { ._composerPage_13k2n_11 { width: 100%; margin: 0; } ._workspace_13k2n_735, ._workspaceCollapsed_13k2n_751 { grid-template-columns: 1fr; } ._accountsPane_13k2n_767 { border-right: 0; border-bottom: 1px solid var(--cc-border); } ._accountsBody_13k2n_897 { position: static; } ._accountsMini_13k2n_1431 { flex-direction: row; flex-wrap: wrap; justify-content: center; } ._composerScroll_13k2n_1531 { padding: 12px; } ._aiMediaCard_13k2n_3569 { grid-template-columns: 42px minmax(0, 1fr); } ._aiMediaActions_13k2n_3815 { grid-column: 1 / -1; } ._uploadedMediaMain_13k2n_3125, ._thumbnailRow_13k2n_3319 { flex-wrap: wrap; } ._composerFooter_13k2n_4209 { position: static; flex-direction: column; align-items: stretch; } ._footerActions_13k2n_4325 { width: 100%; } ._footerActions_13k2n_4325>button { flex: 1; } ._aiDrawerInner_13k2n_5501 { padding-top: 6vh; } ._aiGreeting_13k2n_5515 { font-size: 19px; } ._aiPromptFooter_13k2n_6023 { flex-direction: column; align-items: stretch; } ._aiPromptSend_13k2n_6127 { justify-content: flex-end; } } @media (max-width: 520px) { ._topBar_13k2n_517 { padding: 10px 12px; } ._editorToolbar_13k2n_2067 { flex-direction: column; align-items: stretch; } ._toolbarRight_13k2n_2097 { justify-content: space-between; } ._whenOptions_13k2n_3887 { flex-direction: column; gap: 10px; } ._publishDateCard_13k2n_4001, ._timezoneSelect_13k2n_4101 { width: 100%; } ._dropZoneSources_13k2n_2961 { flex-direction: column; align-items: stretch; } ._sourceDivider_13k2n_3093 { display: none; } } @media (prefers-reduced-motion: reduce) { ._drawerOverlay_13k2n_5233, ._aiDrawer_13k2n_5311, ._scheduleDrawer_13k2n_5355, ._spinIcon_13k2n_111 { animation: none; } }/* WhatsAppCampaignSecondView.module.css */ /* ====================================================== BACK LINK ====================================================== */ ._backLink_62ync_13 { display: inline-flex; align-items: center; gap: 6px; background: none; border: none; padding: 0; margin-bottom: 16px; font-size: 13px; font-weight: 500; color: #6b7280; cursor: pointer; } ._backLink_62ync_13:hover { color: #111827; } /* ====================================================== HEADER ====================================================== */ ._headerRow_62ync_57 { display: flex; align-items: flex-start; justify-content: space-between; gap: 16px; margin-bottom: 20px; flex-wrap: wrap; min-width: 0; } ._headerLeft_62ync_77 { min-width: 0; flex: 1; } ._headerTitleRow_62ync_87 { display: flex; align-items: center; gap: 10px; flex-wrap: wrap; } ._contactName_62ync_101 { font-size: 22px; font-weight: 700; color: #111827; margin: 0; } ._headerSubtitle_62ync_115 { margin: 4px 0 0; font-size: 13px; color: #6b7280; } ._headerActions_62ync_127 { display: flex; align-items: center; gap: 8px; flex-shrink: 0; flex-wrap: wrap; } ._iconOnlyBtn_62ync_143 { display: inline-flex; align-items: center; justify-content: center; width: 34px; height: 34px; border-radius: 8px; border: 1px solid #e5e7eb; background: #fff; color: #6b7280; cursor: pointer; flex-shrink: 0; } ._iconOnlyBtn_62ync_143:hover { background: #f9fafb; } /* ====================================================== STATUS BADGE ====================================================== */ ._statusBadge_62ync_187 { display: inline-flex; align-items: center; padding: 3px 10px; border-radius: 999px; font-size: 12px; font-weight: 600; } ._statusBadgeSuccess_62ync_205 { background: #dcfce7; color: #15803d; } /* ====================================================== PROGRESS STEPPER (dashed line, icon+label inline) ====================================================== */ ._stepperCard_62ync_223 { background: #fff; border: 1px solid #e5e7eb; border-radius: 12px; padding: 18px 24px; margin-bottom: 16px; overflow-x: auto; } ._stepper_62ync_223 { display: flex; align-items: center; min-width: 520px; } ._stepperItem_62ync_253 { display: flex; align-items: center; flex: 1; } ._stepperItem_62ync_253:last-child { flex: 0 0 auto; } ._stepperNode_62ync_273 { display: flex; align-items: center; gap: 8px; flex-shrink: 0; } ._stepDot_62ync_287 { display: inline-flex; align-items: center; justify-content: center; width: 24px; height: 24px; border-radius: 999px; background: #f3f4f6; color: #9ca3af; border: 1px solid #e5e7eb; flex-shrink: 0; } ._stepDotDone_62ync_313 { background: #dcfce7; border-color: #86efac; color: #16a34a; } ._stepDotChat_62ync_325 { background: #dbeafe; border-color: #93c5fd; color: #2563eb; } ._stepLabel_62ync_337 { font-size: 13px; font-weight: 600; color: #374151; white-space: nowrap; } ._stepConnector_62ync_351 { flex: 1; height: 0; border-top: 1.5px dashed #d1d5db; margin: 0 14px; } /* ====================================================== CONTACT INFO BAR ====================================================== */ ._infoBar_62ync_373 { display: flex; align-items: center; gap: 20px; background: #fff; border: 1px solid #e5e7eb; border-radius: 12px; padding: 16px 20px; margin-bottom: 20px; min-width: 0; } ._infoAvatar_62ync_397 { width: 44px; height: 44px; flex-shrink: 0; display: inline-flex; align-items: center; justify-content: center; border-radius: 999px; background: #dcfce7; color: #15803d; font-size: 15px; font-weight: 700; } ._infoColumns_62ync_425 { flex: 1; min-width: 0; display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 16px; } ._infoCol_62ync_425 { min-width: 0; display: flex; flex-direction: column; gap: 8px; } ._infoItem_62ync_455 { display: flex; align-items: center; gap: 6px; font-size: 13px; color: #4b5563; min-width: 0; flex-wrap: wrap; } ._infoLabel_62ync_475 { color: #9ca3af; flex-shrink: 0; } ._infoValue_62ync_485 { color: #374151; font-weight: 500; overflow-wrap: anywhere; } ._infoIcon_62ync_497 { color: #9ca3af; flex-shrink: 0; } ._infoIconWhatsapp_62ync_507 { color: #25d366; flex-shrink: 0; } ._viewCampaignBtn_62ync_517 { padding: 6px 14px; border-radius: 7px; border: 1px solid #bfdbfe; background: #eff6ff; color: #2563eb; font-size: 13px; font-weight: 600; cursor: pointer; flex-shrink: 0; white-space: nowrap; } ._viewCampaignBtn_62ync_517:hover { background: #dbeafe; } /* ====================================================== MAIN GRID ====================================================== */ ._mainGrid_62ync_559 { display: grid; grid-template-columns: 1.4fr 1fr; gap: 20px; align-items: flex-start; min-width: 0; } ._sideCol_62ync_575 { display: flex; flex-direction: column; gap: 20px; min-width: 0; } ._card_62ync_589 { background: #fff; border: 1px solid #e5e7eb; border-radius: 12px; padding: 20px; min-width: 0; } ._cardHeaderRow_62ync_605 { display: flex; align-items: center; justify-content: space-between; flex-wrap: wrap; gap: 10px; margin-bottom: 16px; } ._cardHeaderActions_62ync_623 { display: flex; align-items: center; gap: 14px; flex-wrap: wrap; } ._cardTitle_62ync_637 { font-size: 15px; font-weight: 700; color: #111827; margin: 0 0 16px; } ._cardHeaderRow_62ync_605 ._cardTitle_62ync_637 { margin: 0; } ._pillBtn_62ync_659 { display: inline-flex; align-items: center; gap: 6px; padding: 5px 12px; border-radius: 999px; border: 1px solid #86efac; background: #f0fdf4; color: #16a34a; font-size: 12px; font-weight: 600; cursor: pointer; } ._linkBtn_62ync_687 { display: inline-flex; align-items: center; gap: 5px; background: none; border: none; padding: 0; font-size: 12.5px; font-weight: 600; color: #4b5563; cursor: pointer; white-space: nowrap; } ._linkBtn_62ync_687:hover { color: #2563eb; } /* ====================================================== WHATSAPP MESSAGE META ====================================================== */ ._waMeta_62ync_731 { display: flex; flex-direction: column; gap: 4px; padding-bottom: 14px; margin-bottom: 16px; border-bottom: 1px solid #f3f4f6; font-size: 12px; color: #4b5563; } ._waMetaRow_62ync_753 { display: flex; gap: 6px; min-width: 0; } ._waMetaRow_62ync_753 span:last-child { overflow-wrap: anywhere; } ._waMetaLabel_62ync_773 { color: #9ca3af; min-width: 62px; flex-shrink: 0; } /* ====================================================== CHAT PREVIEW ====================================================== */ ._chatFrame_62ync_793 { background: #efe9dd; background-image: radial-gradient(#dcd4c0 1px, transparent 1px); background-size: 16px 16px; border: 1px solid #e5e7eb; border-radius: 10px; padding: 20px; display: flex; flex-direction: column; gap: 10px; } ._chatBubbleOut_62ync_817 { align-self: flex-start; max-width: 340px; width: 100%; background: #dcf8c6; border-radius: 10px; padding: 12px 14px 10px; box-shadow: 0 1px 1px rgba(0, 0, 0, 0.08); } ._chatBubbleIn_62ync_837 { align-self: flex-end; max-width: 320px; width: fit-content; background: #fff; border-radius: 10px; padding: 10px 14px; box-shadow: 0 1px 1px rgba(0, 0, 0, 0.08); } ._chatText_62ync_857 { font-size: 13px; color: #111827; line-height: 1.5; margin: 0 0 6px; } ._saleBanner_62ync_871 { margin: 10px 0; padding: 14px; border-radius: 8px; background: linear-gradient(135deg, #14532d 0%, #166534 60%, #15803d 100%); color: #fff; text-align: center; overflow: hidden; } ._saleBannerTop_62ync_891 { display: block; font-size: 11px; font-weight: 700; letter-spacing: 1px; color: #d9f99d; } ._saleBannerMid_62ync_907 { display: flex; align-items: center; justify-content: center; gap: 6px; margin: 2px 0; } ._saleBannerFlash_62ync_923 { font-size: 20px; font-weight: 800; color: #fff; letter-spacing: 0.5px; } ._saleBannerPercent_62ync_937 { font-size: 22px; font-weight: 800; color: #facc15; } ._saleBannerTag_62ync_949 { display: inline-block; margin-top: 4px; padding: 3px 10px; border-radius: 4px; background: #facc15; color: #111827; font-size: 11px; font-weight: 700; } ._chatCta_62ync_971 { display: block; width: 100%; background: #16a34a; color: #fff; border: none; padding: 9px 16px; border-radius: 7px; font-size: 13px; font-weight: 600; cursor: pointer; margin-bottom: 6px; } ._chatMetaRow_62ync_999 { display: flex; align-items: center; justify-content: flex-end; gap: 4px; font-size: 11px; color: #6b7280; } ._chatReadTick_62ync_1017 { color: #34b7f1; } ._chatMetaRowIn_62ync_1025 { display: flex; justify-content: flex-end; font-size: 11px; color: #9ca3af; } /* ====================================================== ACTIVITY TIMELINE ====================================================== */ ._timeline_62ync_1047 { list-style: none; margin: 0; padding: 0; } ._timelineItem_62ync_1059 { display: flex; gap: 12px; position: relative; padding-bottom: 20px; } ._timelineItem_62ync_1059:not(:last-child)::before { content: ""; position: absolute; left: 12px; top: 26px; bottom: 0; width: 1px; background: #e5e7eb; } ._timelineIcon_62ync_1093 { flex-shrink: 0; width: 25px; height: 25px; border-radius: 999px; display: inline-flex; align-items: center; justify-content: center; background: #f3f4f6; color: #6b7280; z-index: 1; } ._tone-success_62ync_1119 { background: #dcfce7; color: #16a34a; } ._tone-info_62ync_1129 { background: #dbeafe; color: #2563eb; } ._tone-readBlue_62ync_1139 { background: #dbeafe; color: #2563eb; } ._tone-neutral_62ync_1149 { background: #f3f4f6; color: #6b7280; } ._timelineContent_62ync_1159 { flex: 1; min-width: 0; } ._timelineHeadRow_62ync_1169 { display: flex; align-items: center; gap: 8px; flex-wrap: wrap; } ._timelineLabel_62ync_1183 { font-size: 13px; font-weight: 600; color: #111827; } ._timelineTimestamp_62ync_1195 { font-size: 11.5px; color: #9ca3af; } ._timelineBadge_62ync_1205 { margin-left: auto; font-size: 10px; font-weight: 600; color: #2563eb; background: #eff6ff; border: 1px solid #bfdbfe; border-radius: 999px; padding: 2px 8px; white-space: nowrap; } ._timelineDetail_62ync_1229 { font-size: 12px; color: #6b7280; margin-top: 3px; word-break: break-word; } ._replyBox_62ync_1243 { margin-top: 10px; background: #eff6ff; border: 1px solid #bfdbfe; border-radius: 10px; padding: 12px 14px; } ._replyFrom_62ync_1259 { font-size: 12px; font-weight: 600; color: #1d4ed8; margin-bottom: 6px; } ._replyMessage_62ync_1273 { font-size: 12.5px; color: #374151; line-height: 1.5; margin: 0 0 12px; } ._replyActions_62ync_1287 { display: flex; gap: 8px; flex-wrap: wrap; } ._waPrimaryBtn_62ync_1299 { display: inline-flex; align-items: center; gap: 6px; padding: 8px 14px; border-radius: 8px; border: none; background: #16a34a; color: #fff; font-size: 13px; font-weight: 600; cursor: pointer; } ._waPrimaryBtn_62ync_1299:hover { background: #15803d; } /* ====================================================== DELIVERY DETAILS ====================================================== */ ._deliveryGrid_62ync_1343 { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); row-gap: 14px; column-gap: 12px; } ._deliveryItem_62ync_1357 { display: flex; align-items: center; gap: 6px; font-size: 12.5px; flex-wrap: wrap; min-width: 0; } ._deliveryLabel_62ync_1375 { color: #9ca3af; } ._deliveryValue_62ync_1383 { color: #111827; font-weight: 600; overflow-wrap: anywhere; } ._deliveryIconSuccess_62ync_1395 { color: #16a34a; } ._deliveryIconInfo_62ync_1403 { color: #2563eb; } ._deliveryIconWhatsapp_62ync_1411 { color: #25d366; } ._deliveryIconMuted_62ync_1419 { color: #9ca3af; } /* ====================================================== RESPONSIVE ====================================================== */ @media (max-width: 1100px) { ._infoColumns_62ync_425 { grid-template-columns: repeat(2, minmax(0, 1fr)); } ._deliveryGrid_62ync_1343 { grid-template-columns: repeat(2, minmax(0, 1fr)); } } @media (max-width: 960px) { ._mainGrid_62ync_559 { grid-template-columns: 1fr; } } @media (max-width: 768px) { ._headerRow_62ync_57 { flex-direction: column; align-items: stretch; } ._headerActions_62ync_127 { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 8px; } ._headerActions_62ync_127 ._iconOnlyBtn_62ync_143 { grid-column: 1 / -1; width: 100%; } ._infoBar_62ync_373 { flex-wrap: wrap; } ._infoColumns_62ync_425 { grid-template-columns: 1fr; width: 100%; order: 3; } ._viewCampaignBtn_62ync_517 { width: 100%; text-align: center; order: 2; } ._infoAvatar_62ync_397 { order: 1; } ._chatBubbleOut_62ync_817, ._chatBubbleIn_62ync_837 { max-width: 100%; } } @media (max-width: 560px) { ._card_62ync_589 { padding: 16px; } ._stepperCard_62ync_223 { padding: 16px; } ._headerActions_62ync_127 { grid-template-columns: 1fr; } ._headerActions_62ync_127 ._iconOnlyBtn_62ync_143 { grid-column: auto; } ._cardHeaderRow_62ync_605 { flex-direction: column; align-items: stretch; } ._cardHeaderActions_62ync_623 { justify-content: space-between; } ._deliveryGrid_62ync_1343 { grid-template-columns: 1fr; } ._replyActions_62ync_1287 { flex-direction: column; } ._replyActions_62ync_1287 ._waPrimaryBtn_62ync_1299, ._replyActions_62ync_1287 .app-btn { width: 100%; justify-content: center; } ._infoItem_62ync_455 { width: 100%; } ._chatFrame_62ync_793 { padding: 14px; } } @media (max-width: 420px) { ._contactName_62ync_101 { font-size: 19px; } ._stepLabel_62ync_337 { font-size: 11px; } ._saleBannerFlash_62ync_923 { font-size: 17px; } ._saleBannerPercent_62ync_937 { font-size: 19px; } }/* ================================================================ STAT ICON — GREEN VARIANT (blue + amber already exist globally as .ct-stat-icon.blue/.amber; this adds the green variant used by Active / Completed) ================================================================ */ ._green_e1kmq_13 { background: var(--color-success-soft, #e6f7ec); color: var(--color-success, #16a34a); } /* ================================================================ TABS ================================================================ */ ._tabs_e1kmq_33 { display: flex; align-items: center; gap: var(--space-4); border-bottom: 1px solid var(--border-light); } ._tabBtn_e1kmq_51 { position: relative; padding: var(--space-2) 0 var(--space-3); border: none; background: transparent; color: var(--text-secondary); font-size: var(--font-size-sm); font-weight: var(--font-weight-medium); cursor: pointer; } ._tabBtn_e1kmq_51:hover { color: var(--text-primary-dark); } ._tabActive_e1kmq_91 { color: var(--color-primary); font-weight: var(--font-weight-semibold); } ._tabActive_e1kmq_91::after { content: ""; position: absolute; left: 0; right: 0; bottom: -1px; height: 2px; border-radius: var(--radius-full); background: var(--color-primary); } /* ================================================================ RATE CELL (for progress bars - not used in voice but kept for consistency) ================================================================ */ ._rateCell_e1kmq_141 { display: flex; flex-direction: column; gap: 4px; min-width: 90px; } ._rateValue_e1kmq_159 { font-size: var(--font-size-xs); font-weight: var(--font-weight-semibold); color: var(--color-success, #16a34a); } ._rateEmpty_e1kmq_173 { font-size: var(--font-size-xs); font-weight: var(--font-weight-medium); color: var(--text-secondary); } ._rateTrack_e1kmq_187 { width: 100%; height: 5px; border-radius: var(--radius-full); background: var(--border-light); overflow: hidden; } ._rateFill_e1kmq_209 { height: 100%; border-radius: var(--radius-full); background: var(--color-success, #16a34a); } ._rateFillEmpty_e1kmq_225 { height: 100%; border-radius: var(--radius-full); background: var(--border-light); } /* ================================================================ RESPONSIVE ================================================================ */ @media (max-width: 700px) { ._tabs_e1kmq_33 { overflow-x: auto; white-space: nowrap; -ms-overflow-style: none; scrollbar-width: none; } ._tabs_e1kmq_33::-webkit-scrollbar { display: none; } }._page_oz4wn_1 { width: 100%; min-width: 0; display: flex; flex-direction: column; gap: var(--space-4); padding-top: var(--space-4); box-sizing: border-box; } /* ================================================================ BACK LINK ================================================================ */ ._backLink_oz4wn_37 { display: inline-flex; align-items: center; width: fit-content; border: none; background: transparent; padding: 0; color: var(--color-primary); font-size: var(--font-size-xs); font-weight: var(--font-weight-medium); cursor: pointer; } ._backLink_oz4wn_37:hover { text-decoration: underline; } /* ================================================================ PAGE HEADER ================================================================ */ ._pageHeader_oz4wn_91 { width: 100%; display: flex; align-items: flex-start; justify-content: space-between; gap: var(--space-4); } ._titleRow_oz4wn_111 { display: flex; align-items: center; gap: var(--space-2); margin-bottom: var(--space-1); } ._pageTitle_oz4wn_129 { margin: 0; font-size: var(--font-size-2xl); font-weight: var(--font-weight-bold); color: var(--text-primary-dark); } ._channelBadge_oz4wn_147 { padding: 2px 8px; border-radius: var(--radius-sm); background: var(--color-primary-soft, #eff6ff); color: var(--color-primary, #2563eb); font-size: var(--font-size-xs); font-weight: var(--font-weight-semibold); } ._pageDescription_oz4wn_173 { margin: 0; font-size: var(--font-size-xs); color: var(--text-secondary); } ._headerActions_oz4wn_189 { display: flex; align-items: center; gap: var(--space-2); flex-shrink: 0; } /* ================================================================ COMMON CARD ================================================================ */ ._card_oz4wn_215 { width: 100%; background: var(--color-white); border: 1px solid var(--border-light); border-radius: var(--radius-lg); box-shadow: var(--shadow-sm); box-sizing: border-box; padding: var(--space-4); } ._sectionTitle_oz4wn_247 { margin: 0 0 var(--space-3); font-size: var(--font-size-base); font-weight: var(--font-weight-semibold); color: var(--text-primary-dark); } ._sectionTitle_oz4wn_247 span { color: var(--color-danger); } /* ================================================================ MAIN GRID — LEFT (details+content) / RIGHT (preview) ================================================================ */ ._mainGrid_oz4wn_281 { width: 100%; display: grid; grid-template-columns: minmax(0, 1fr) 320px; gap: var(--space-4); align-items: start; } ._leftCol_oz4wn_305 { display: flex; flex-direction: column; gap: var(--space-4); min-width: 0; } ._rightCol_oz4wn_323 { position: sticky; top: var(--space-4); } /* ================================================================ FORM GRID ================================================================ */ ._formGrid_oz4wn_343 { width: 100%; display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); column-gap: var(--space-4); row-gap: var(--space-3); } ._formGroup_oz4wn_365 { min-width: 0; } ._formGroup_oz4wn_365 > label { display: block; margin-bottom: var(--space-1); color: var(--text-primary-dark); font-size: var(--font-size-xs); font-weight: var(--font-weight-medium); } ._formGroup_oz4wn_365 > label span { color: var(--color-danger); } ._formGroup_oz4wn_365 .app-input, ._formGroup_oz4wn_365 .app-select { height: 34px; padding-top: 0; padding-bottom: 0; } ._formGroup_oz4wn_365 textarea { width: 100%; min-height: 50px; resize: vertical; } /* ================================================================ VOICE GRID ================================================================ */ ._voiceGrid_oz4wn_443 { width: 100%; display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); column-gap: var(--space-4); row-gap: var(--space-3); } /* ================================================================ DURATION FIELD ================================================================ */ ._durationField_oz4wn_473 { display: flex; align-items: center; gap: var(--space-2); } ._durationField_oz4wn_473 .app-input { flex: 0 0 80px; } ._durationUnit_oz4wn_495 { color: var(--text-secondary); font-size: var(--font-size-xs); } /* ================================================================ CHECKBOX GROUP ================================================================ */ ._checkboxGroup_oz4wn_515 { display: flex; align-items: center; gap: var(--space-2); padding-top: 6px; } ._checkbox_oz4wn_515 { width: 16px; height: 16px; accent-color: var(--color-primary); cursor: pointer; } ._checkboxGroup_oz4wn_515 label { margin: 0; color: var(--text-primary-dark); font-size: var(--font-size-xs); font-weight: var(--font-weight-medium); cursor: pointer; } /* ================================================================ START DATE / TIME FIELD ================================================================ */ ._dateTimeField_oz4wn_581 { width: 100%; display: flex; gap: var(--space-2); } ._dateInputWrap_oz4wn_597, ._timeInputWrap_oz4wn_599 { position: relative; flex: 1; min-width: 0; } ._dateInputWrap_oz4wn_597 .app-input, ._timeInputWrap_oz4wn_599 .app-input { width: 100%; height: 34px; padding-right: 30px; } ._fieldIcon_oz4wn_629 { position: absolute; top: 50%; right: var(--space-2); transform: translateY(-50%); width: 14px; height: 14px; color: var(--text-secondary); pointer-events: none; } /* ================================================================ VOICE INSTRUCTIONS — TOOLBAR ================================================================ */ ._contentHeader_oz4wn_669 { display: flex; align-items: center; justify-content: space-between; } ._contentToolbar_oz4wn_683 { display: flex; align-items: center; justify-content: space-between; gap: var(--space-2); margin-bottom: var(--space-2); } ._toolbarLeft_oz4wn_703 { display: flex; align-items: center; gap: var(--space-2); } ._toolbarBtn_oz4wn_717 { display: inline-flex; align-items: center; gap: 6px; padding: 5px 10px; border: 1px solid var(--border-default); border-radius: var(--radius-md); background: var(--color-white); color: var(--text-primary-dark); font-size: var(--font-size-xs); font-weight: var(--font-weight-medium); cursor: pointer; } ._toolbarBtn_oz4wn_717:hover { border-color: var(--color-primary); color: var(--color-primary); } ._resetBtn_oz4wn_773 { display: flex; align-items: center; justify-content: center; width: 28px; height: 28px; border: 1px solid var(--border-default); border-radius: var(--radius-md); background: var(--color-white); color: var(--text-secondary); cursor: pointer; } ._resetBtn_oz4wn_773:hover { border-color: var(--color-primary); color: var(--color-primary); } ._messageArea_oz4wn_823 { width: 100%; padding: var(--space-3); border: 1px solid var(--border-default); border-radius: var(--radius-md); background: var(--color-white); color: var(--text-primary-dark); font-family: inherit; font-size: var(--font-size-sm); line-height: 1.6; resize: vertical; outline: none; } ._messageArea_oz4wn_823:focus { border-color: var(--color-primary); } ._contentFooter_oz4wn_877 { display: flex; align-items: center; gap: var(--space-3); margin-top: var(--space-2); color: var(--text-secondary); font-size: var(--font-size-xs); } ._footerCenter_oz4wn_903 { flex: 1; text-align: center; } ._templateTag_oz4wn_915 { color: var(--color-success, #16a34a); font-weight: var(--font-weight-semibold); } ._contentHint_oz4wn_927 { margin: var(--space-2) 0 0; color: var(--text-secondary); font-size: var(--font-size-xs); } /* ================================================================ PREVIEW CARD ================================================================ */ ._previewCard_oz4wn_951 { padding: var(--space-4); border: 1px solid var(--border-light); border-radius: var(--radius-lg); background: var(--color-white); box-shadow: var(--shadow-sm); } ._previewContent_oz4wn_975 { display: flex; flex-direction: column; gap: var(--space-2); } ._previewRow_oz4wn_989 { display: flex; justify-content: space-between; gap: var(--space-2); font-size: var(--font-size-xs); } ._previewLabel_oz4wn_1007 { color: var(--text-secondary); font-weight: var(--font-weight-medium); } ._previewValue_oz4wn_1019 { color: var(--text-primary-dark); text-align: right; font-weight: var(--font-weight-medium); } ._previewInstructions_oz4wn_1035 { color: var(--text-primary-dark); text-align: right; font-size: var(--font-size-xs); line-height: 1.4; max-width: 180px; word-break: break-word; } ._previewDivider_oz4wn_1063 { height: 1px; margin: var(--space-2) 0; background: var(--border-light); } ._previewMeta_oz4wn_1079 { margin: var(--space-2) 0 0; text-align: center; color: var(--text-secondary); font-size: var(--font-size-xs); } /* ================================================================ SELECT CONTACTS HEADER ================================================================ */ ._selectHeader_oz4wn_1107 { display: flex; align-items: flex-start; justify-content: space-between; gap: var(--space-3); margin-bottom: var(--space-3); } ._selectedBadge_oz4wn_1127 { flex-shrink: 0; padding: 4px 10px; border-radius: var(--radius-full); background: var(--brand-soft); color: var(--brand-ink); font-size: var(--font-size-xs); font-weight: var(--font-weight-medium); white-space: nowrap; } ._selectAllLink_oz4wn_1161 { border: none; background: transparent; padding: 0; color: var(--color-primary); font-size: var(--font-size-xs); font-weight: var(--font-weight-medium); cursor: pointer; white-space: nowrap; } ._selectAllLink_oz4wn_1161:hover { text-decoration: underline; } /* ================================================================ ROW CHECKBOX ================================================================ */ ._rowCheckbox_oz4wn_1209 { width: 14px; height: 14px; margin: 0; accent-color: var(--color-primary); cursor: pointer; } /* ================================================================ RESPONSIVE ================================================================ */ @media (max-width: 1100px) { ._mainGrid_oz4wn_281 { grid-template-columns: 1fr; } ._rightCol_oz4wn_323 { position: static; } } @media (max-width: 900px) { ._formGrid_oz4wn_343 { grid-template-columns: 1fr; } ._voiceGrid_oz4wn_443 { grid-template-columns: 1fr; } } @media (max-width: 700px) { ._pageHeader_oz4wn_91 { flex-direction: column; } ._headerActions_oz4wn_189 { width: 100%; } ._headerActions_oz4wn_189 .app-btn { flex: 1; } ._selectHeader_oz4wn_1107 { flex-direction: column; } ._contentToolbar_oz4wn_683 { flex-wrap: wrap; } ._durationField_oz4wn_473 .app-input { flex: 1; } } /* ====================================================== VARIABLES PANEL - Like SMS Campaign ====================================================== */ ._contentHeader_oz4wn_669 { display: flex; justify-content: space-between; align-items: center; margin-bottom: 16px; } ._contentHeader_oz4wn_669 ._sectionTitle_oz4wn_247 { margin-bottom: 0; } ._variablesToggle_oz4wn_1361 { display: flex; align-items: center; gap: 6px; padding: 6px 14px; font-size: 13px; font-weight: 500; color: #6b7280; background: #f3f4f6; border: 1px solid #e5e7eb; border-radius: 6px; cursor: pointer; transition: all 0.2s ease; } ._variablesToggle_oz4wn_1361:hover { background: #e5e7eb; color: #374151; } ._variablesToggle_oz4wn_1361 svg { flex-shrink: 0; } /* Variables Panel */ ._variablesPanel_oz4wn_1411 { background: #f8fafc; border: 1px solid #e2e8f0; border-radius: 8px; padding: 16px; margin-bottom: 16px; max-height: 400px; overflow-y: auto; } ._variablesTitle_oz4wn_1431 { font-size: 14px; font-weight: 600; color: #0f172a; margin: 0 0 4px 0; } ._variablesHint_oz4wn_1445 { font-size: 13px; color: #64748b; margin: 0 0 12px 0; } ._variablesGrid_oz4wn_1457 { display: flex; flex-wrap: wrap; gap: 8px; } ._variableChip_oz4wn_1469 { display: flex; flex-direction: column; align-items: flex-start; gap: 2px; padding: 8px 12px; background: #ffffff; border: 1px solid #e2e8f0; border-radius: 6px; cursor: pointer; transition: all 0.2s ease; min-width: 120px; flex: 0 1 auto; } ._variableChip_oz4wn_1469:hover { background: #f1f5f9; border-color: #94a3b8; transform: translateY(-1px); box-shadow: 0 2px 4px rgba(0, 0, 0, 0.05); } ._variableChip_oz4wn_1469 code { font-size: 13px; font-weight: 600; color: #0f172a; background: transparent; padding: 0; font-family: "SF Mono", "Fira Code", "Consolas", monospace; } ._variableDesc_oz4wn_1531 { font-size: 11px; color: #64748b; line-height: 1.3; } ._variablesNotes_oz4wn_1543 { display: flex; align-items: center; gap: 6px; margin-top: 12px; padding-top: 12px; border-top: 1px solid #e2e8f0; font-size: 12px; color: #64748b; } ._variablesNotes_oz4wn_1543 svg { flex-shrink: 0; color: #94a3b8; } ._noVariables_oz4wn_1575 { font-size: 14px; color: #94a3b8; padding: 12px 0; text-align: center; } ._variablesLoading_oz4wn_1589 { display: flex; align-items: center; gap: 10px; padding: 12px 0; font-size: 14px; color: #64748b; } /* Responsive adjustments for variables panel */ @media (max-width: 768px) { ._variablesGrid_oz4wn_1457 { flex-direction: column; } ._variableChip_oz4wn_1469 { min-width: 100%; } ._contentHeader_oz4wn_669 { flex-direction: column; align-items: flex-start; gap: 8px; } ._variablesToggle_oz4wn_1361 { width: 100%; justify-content: center; } } /* ====================================================== Quick Toolbar Buttons (if you need them) ====================================================== */ ._contentToolbar_oz4wn_683 { display: flex; justify-content: space-between; align-items: center; flex-wrap: wrap; gap: 8px; margin-bottom: 8px; padding: 6px 0; } ._toolbarLeft_oz4wn_703 { display: flex; flex-wrap: wrap; gap: 6px; } ._toolbarBtn_oz4wn_717 { display: flex; align-items: center; gap: 4px; padding: 4px 10px; font-size: 12px; font-weight: 500; color: #4b5563; background: #f9fafb; border: 1px solid #e5e7eb; border-radius: 4px; cursor: pointer; transition: all 0.2s ease; } ._toolbarBtn_oz4wn_717:hover:not(:disabled) { background: #f3f4f6; border-color: #d1d5db; color: #1f2937; } ._toolbarBtn_oz4wn_717:disabled { opacity: 0.5; cursor: not-allowed; } ._toolbarBtn_oz4wn_717 svg { flex-shrink: 0; } ._resetBtn_oz4wn_773 { display: flex; align-items: center; justify-content: center; padding: 4px 8px; color: #9ca3af; background: transparent; border: 1px solid transparent; border-radius: 4px; cursor: pointer; transition: all 0.2s ease; } ._resetBtn_oz4wn_773:hover:not(:disabled) { color: #ef4444; background: #fef2f2; border-color: #fca5a5; } ._resetBtn_oz4wn_773:disabled { opacity: 0.5; cursor: not-allowed; } /* Message/Instructions textarea */ ._messageArea_oz4wn_823 { width: 100%; min-height: 180px; padding: 12px; font-size: 14px; font-family: inherit; color: #1f2937; background: #ffffff; border: 1px solid #d1d5db; border-radius: 6px; resize: vertical; transition: border-color 0.2s ease; line-height: 1.6; } ._messageArea_oz4wn_823:focus { outline: none; border-color: --color-primary; box-shadow: 0 0 0 3px rgba(99, 102, 241, 0.1); } ._messageArea_oz4wn_823:disabled { background: #f9fafb; cursor: not-allowed; opacity: 0.7; } /* Content footer */ ._contentFooter_oz4wn_877 { display: flex; justify-content: space-between; align-items: center; margin-top: 8px; font-size: 12px; color: #9ca3af; } ._footerCenter_oz4wn_903 { flex: 1; text-align: center; } ._templateTag_oz4wn_915 { padding: 2px 10px; font-size: 11px; font-weight: 500; color: #6b7280; background: #f3f4f6; border-radius: 12px; } /* Scrollbar styles for variables panel */ ._variablesPanel_oz4wn_1411::-webkit-scrollbar { width: 4px; } ._variablesPanel_oz4wn_1411::-webkit-scrollbar-track { background: transparent; } ._variablesPanel_oz4wn_1411::-webkit-scrollbar-thumb { background: #cbd5e1; border-radius: 2px; } ._variablesPanel_oz4wn_1411::-webkit-scrollbar-thumb:hover { background: #94a3b8; } /* Loading bar at top */ ._loadingBar_oz4wn_1941 { display: flex; align-items: center; gap: 10px; padding: 12px 16px; background: #f0f9ff; border: 1px solid #bae6fd; border-radius: 8px; margin-bottom: 20px; font-size: 14px; color: #0284c7; } /* Contact limit badge */ ._contactLimit_oz4wn_1969 { display: inline-block; margin-left: 8px; padding: 2px 10px; font-size: 12px; font-weight: 500; color: #64748b; background: #f1f5f9; border-radius: 12px; } /* Select all link */ ._selectAllLink_oz4wn_1161 { font-size: 13px; color: --color-primary; background: transparent; border: none; cursor: pointer; text-decoration: underline; transition: color 0.2s ease; } ._selectAllLink_oz4wn_1161:hover:not(:disabled) { color: #4f46e5; } ._selectAllLink_oz4wn_1161:disabled { opacity: 0.5; cursor: not-allowed; } ._selectedBadge_oz4wn_1127 { flex-shrink: 0; padding: 4px 10px; border-radius: var(--radius-full); background: var(--brand-soft); color: var(--brand-ink); font-size: var(--font-size-xs); font-weight: var(--font-weight-medium); white-space: nowrap; } /* Select header - container for the select contacts section */ ._selectHeader_oz4wn_1107 { display: flex; justify-content: space-between; align-items: center; flex-wrap: wrap; gap: 12px; margin-bottom: 16px; } ._selectHeader_oz4wn_1107 ._sectionTitle_oz4wn_247 { margin-bottom: 0; } ._selectHeader_oz4wn_1107 ._pageDescription_oz4wn_173 { margin-top: 4px; font-size: 14px; color: #6b7280; } /* Checkbox row styles */ ._rowCheckbox_oz4wn_1209 { width: 14px; height: 14px; margin: 0; accent-color: var(--color-primary); cursor: pointer; } /* Preview card styles */ ._previewCard_oz4wn_951 { background: #ffffff; border: 1px solid #e5e7eb; border-radius: 8px; padding: 20px; position: sticky; top: 20px; } ._previewCard_oz4wn_951 ._sectionTitle_oz4wn_247 { margin-bottom: 16px; } ._previewContent_oz4wn_975 { display: flex; flex-direction: column; gap: 8px; } ._previewRow_oz4wn_989 { display: flex; justify-content: space-between; align-items: center; padding: 4px 0; font-size: 13px; } ._previewLabel_oz4wn_1007 { color: #6b7280; font-weight: 500; } ._previewValue_oz4wn_1019 { color: #1f2937; font-weight: 500; text-align: right; max-width: 60%; word-break: break-word; } ._previewDivider_oz4wn_1063 { height: 1px; background: #e5e7eb; margin: 8px 0; } ._previewMeta_oz4wn_1079 { margin-top: 16px; padding-top: 12px; border-top: 1px solid #e5e7eb; font-size: 12px; color: #9ca3af; text-align: center; } /* Responsive adjustments */ @media (max-width: 640px) { ._selectHeader_oz4wn_1107 { flex-direction: column; align-items: flex-start; } ._previewRow_oz4wn_989 { flex-direction: column; align-items: flex-start; gap: 2px; } ._previewValue_oz4wn_1019 { text-align: left; max-width: 100%; } ._toolbarLeft_oz4wn_703 { flex-wrap: wrap; } ._toolbarBtn_oz4wn_717 { font-size: 11px; padding: 3px 8px; } } /* AI Generate Button */ ._headerButtons_oz4wn_2299 { display: flex; align-items: center; gap: 8px; } ._aiGenerateBtn_oz4wn_2311 { display: inline-flex; align-items: center; gap: 6px; padding: 6px 14px; font-size: 13px; font-weight: 500; color: #7c3aed; background: #f5f3ff; border: 1px solid #ddd6fe; border-radius: 6px; cursor: pointer; transition: all 0.2s ease; } ._aiGenerateBtn_oz4wn_2311:hover:not(:disabled) { background: #ede9fe; border-color: #c4b5fd; } ._aiGenerateBtn_oz4wn_2311:disabled { opacity: 0.6; cursor: not-allowed; } /* AI Generate Panel */ ._aiGeneratePanel_oz4wn_2363 { background: #f8fafc; border: 1px solid #e2e8f0; border-radius: 8px; padding: 16px; margin-bottom: 16px; } ._aiGenerateTitle_oz4wn_2379 { display: flex; align-items: center; gap: 8px; font-size: 14px; font-weight: 600; color: #0f172a; margin: 0 0 4px 0; } ._aiSparkleIcon_oz4wn_2399 { color: #7c3aed; } ._aiGenerateHint_oz4wn_2407 { font-size: 13px; color: #64748b; margin: 0 0 12px 0; } ._aiGenerateForm_oz4wn_2419 { display: flex; flex-direction: column; gap: 12px; } ._aiFormGroup_oz4wn_2431 { display: flex; flex-direction: column; gap: 4px; } ._aiFormGroup_oz4wn_2431 label { font-size: 13px; font-weight: 500; color: #1f2937; } ._aiFormRow_oz4wn_2455 { display: grid; grid-template-columns: 1fr 1fr; gap: 12px; } ._aiGenerateActions_oz4wn_2467 { display: flex; justify-content: flex-end; gap: 8px; margin-top: 4px; padding-top: 12px; border-top: 1px solid #e2e8f0; } /* Responsive */ @media (max-width: 768px) { ._aiFormRow_oz4wn_2455 { grid-template-columns: 1fr; } ._headerButtons_oz4wn_2299 { flex-wrap: wrap; } } /* Success button for Instant Call */ ._app-btn-success_oz4wn_2509 { display: inline-flex; align-items: center; gap: 6px; padding: 8px 16px; border: none; border-radius: 8px; background: #10b981; color: #ffffff; font-weight: 600; font-size: 14px; cursor: pointer; transition: all 0.2s ease; } ._app-btn-success_oz4wn_2509:hover:not(:disabled) { background: #059669; } ._app-btn-success_oz4wn_2509:disabled { opacity: 0.6; cursor: not-allowed; } /* Optional hint for date field */ ._optionalHint_oz4wn_2559 { font-weight: 400; color: #9ca3af; margin-left: 4px; font-size: 11px; } /* ================================================================ BACK LINK ================================================================ */ ._backLink_v3kjh_9 { display: inline-flex; align-items: center; width: fit-content; border: none; background: transparent; padding: 0; color: var(--color-primary); font-size: var(--font-size-xs); font-weight: var(--font-weight-medium); cursor: pointer; } ._backLink_v3kjh_9:hover { text-decoration: underline; } /* ================================================================ TOP BAR (Back + Refresh) ================================================================ */ ._topBar_v3kjh_51 { display: flex; align-items: center; justify-content: space-between; margin-bottom: var(--space-3); } ._refreshBtn_v3kjh_65 { display: inline-flex; align-items: center; gap: var(--space-2); padding: 6px 14px; font-size: var(--font-size-xs); font-weight: var(--font-weight-medium); color: var(--text-secondary); background: var(--color-white); border: 1px solid var(--border-light); border-radius: var(--radius-md); cursor: pointer; transition: all 0.2s ease; } ._refreshBtn_v3kjh_65:hover:not(:disabled) { background: var(--bg-hover); border-color: var(--border-muted); } ._refreshBtn_v3kjh_65:disabled { opacity: 0.6; cursor: not-allowed; } ._spin_v3kjh_115 { animation: _spin_v3kjh_115 1s linear infinite; } @keyframes _spin_v3kjh_115 { from { transform: rotate(0deg); } to { transform: rotate(360deg); } } /* ================================================================ TITLE ROW (name + status badge) ================================================================ */ ._titleRow_v3kjh_151 { display: flex; align-items: center; gap: var(--space-2); margin-bottom: var(--space-1); flex-wrap: wrap; } ._titleRow_v3kjh_151 .ct-page-title { margin: 0; } /* ================================================================ PAUSE BUTTON (amber outline) ================================================================ */ ._pauseBtn_v3kjh_183 { display: inline-flex; align-items: center; gap: var(--space-2); border: 1px solid var(--color-warning, #f59e0b); background: var(--color-white); color: var(--color-warning, #b45309); } ._pauseBtn_v3kjh_183:hover { background: var(--color-warning-soft, #fff7ed); } /* ================================================================ META ROW ================================================================ */ ._metaRow_v3kjh_217 { display: flex; align-items: center; flex-wrap: wrap; gap: var(--space-5); padding: var(--space-3) var(--space-4); border: 1px solid var(--border-light); border-radius: var(--radius-md); background: var(--color-white); margin-bottom: var(--space-4); } ._metaItem_v3kjh_241 { display: inline-flex; align-items: center; gap: var(--space-2); color: var(--text-secondary); font-size: var(--font-size-xs); } ._metaItem_v3kjh_241 strong { color: var(--text-primary-dark); font-weight: var(--font-weight-medium); } /* ================================================================ SECTION TITLE ================================================================ */ ._sectionTitle_v3kjh_275 { margin: 0 0 var(--space-3); font-size: var(--font-size-base); font-weight: var(--font-weight-semibold); color: var(--text-primary-dark); } /* ================================================================ CAMPAIGN PROGRESS GRID (6 cards) ================================================================ */ ._progressGrid_v3kjh_297 { display: grid; grid-template-columns: repeat(6, minmax(0, 1fr)); gap: var(--space-3); margin-bottom: var(--space-4); } ._statTop_v3kjh_311 { display: flex; align-items: flex-start; justify-content: space-between; margin-bottom: var(--space-1); } ._statLabel_v3kjh_325 { font-size: var(--font-size-xs); color: var(--text-secondary); } ._statSub_v3kjh_335 { margin-top: 2px; font-size: var(--font-size-xs); color: var(--text-secondary); } ._statIconSm_v3kjh_347 { width: 24px; height: 24px; flex-shrink: 0; display: flex; align-items: center; justify-content: center; border-radius: var(--radius-full); font-size: 13px; } ._statIconSm_v3kjh_347._blue_v3kjh_369 { background: var(--color-info-soft, #e8f1ff); color: var(--color-info, #2563eb); } ._statIconSm_v3kjh_347._green_v3kjh_379 { background: var(--color-success-soft, #e6f7ec); color: var(--color-success, #16a34a); } ._statIconSm_v3kjh_347._amber_v3kjh_389 { background: var(--color-warning-soft, #fff7ed); color: var(--color-warning, #b45309); } ._statIconSm_v3kjh_347._red_v3kjh_399 { background: var(--color-danger-soft, #fdecec); color: var(--color-danger, #dc2626); } ._statIconSm_v3kjh_347._purple_v3kjh_409 { background: var(--color-purple-soft, #f3e8ff); color: var(--color-purple, #7c3aed); } /* ================================================================ PERFORMANCE GRID (5 cards) ================================================================ */ ._performanceGrid_v3kjh_427 { display: grid; grid-template-columns: repeat(5, minmax(0, 1fr)); gap: var(--space-3); margin-bottom: var(--space-4); } ._performanceTop_v3kjh_441 { display: flex; align-items: center; gap: var(--space-2); margin-bottom: var(--space-2); } ._performanceSub_v3kjh_455 { margin-top: 2px; font-size: var(--font-size-xs); color: var(--text-secondary); } /* ================================================================ INSIGHTS GRID (Outcomes + Sentiment) ================================================================ */ ._insightsGrid_v3kjh_475 { display: grid; grid-template-columns: 2fr 1fr; gap: var(--space-3); margin-bottom: var(--space-4); } ._insightsCard_v3kjh_489 { padding: var(--space-4); background: var(--color-white); border: 1px solid var(--border-light); border-radius: var(--radius-md); } ._insightsTitle_v3kjh_503 { display: flex; align-items: center; gap: var(--space-2); margin: 0 0 var(--space-3); font-size: var(--font-size-sm); font-weight: var(--font-weight-semibold); color: var(--text-primary-dark); } /* Outcomes List */ ._outcomesList_v3kjh_525 { display: flex; flex-direction: column; gap: var(--space-2); } ._outcomeItem_v3kjh_537 { display: flex; align-items: center; gap: var(--space-3); } ._outcomeLabel_v3kjh_549 { min-width: 110px; font-size: var(--font-size-xs); color: var(--text-secondary); text-transform: capitalize; } ._outcomeBar_v3kjh_563 { flex: 1; height: 6px; background: var(--bg-secondary); border-radius: var(--radius-full); overflow: hidden; } ._outcomeFill_v3kjh_579 { height: 100%; background: var(--color-primary); border-radius: var(--radius-full); transition: width 0.6s ease; } ._outcomeCount_v3kjh_593 { min-width: 70px; font-size: var(--font-size-xs); font-weight: var(--font-weight-medium); color: var(--text-primary-dark); text-align: right; } /* Sentiment Grid */ ._sentimentGrid_v3kjh_611 { display: grid; grid-template-columns: 1fr 1fr; gap: var(--space-2); } ._sentimentItem_v3kjh_623 { display: flex; flex-direction: column; padding: var(--space-2) var(--space-3); background: var(--bg-secondary); border-radius: var(--radius-sm); } ._sentimentLabel_v3kjh_639 { font-size: var(--font-size-xs); color: var(--text-secondary); } ._sentimentValue_v3kjh_649 { font-size: var(--font-size-lg); font-weight: var(--font-weight-bold); color: var(--text-primary-dark); } ._sentimentValue_v3kjh_649 small { font-size: var(--font-size-xs); font-weight: var(--font-weight-normal); color: var(--text-secondary); margin-left: var(--space-1); } ._sentimentValue_v3kjh_649._positive_v3kjh_675 { color: var(--color-success, #16a34a); } ._sentimentValue_v3kjh_649._neutral_v3kjh_683 { color: var(--color-warning, #b45309); } ._sentimentValue_v3kjh_649._negative_v3kjh_691 { color: var(--color-danger, #dc2626); } ._noInsights_v3kjh_699 { color: var(--text-secondary); font-size: var(--font-size-sm); padding: var(--space-2) 0; } /* ================================================================ CONTACT ACTIVITY HEADER ================================================================ */ ._activityHeader_v3kjh_719 { display: flex; align-items: flex-start; justify-content: space-between; gap: var(--space-3); margin-bottom: var(--space-3); } ._activityHeader_v3kjh_719 .ct-page-sub { margin: 0; } ._recipientsCount_v3kjh_743 { flex-shrink: 0; padding-top: 2px; color: var(--text-secondary); font-size: var(--font-size-xs); white-space: nowrap; } /* ================================================================ BADGE WITH ICON ================================================================ */ ._badgeWithIcon_v3kjh_767 { display: inline-flex; align-items: center; gap: 4px; } /* ================================================================ CALL INFO CELL ================================================================ */ ._callInfoCell_v3kjh_787 { display: flex; flex-direction: column; gap: 2px; } ._callInfoLine_v3kjh_799 { font-size: var(--font-size-xs); line-height: 1.4; } /* ================================================================ RECORDING CELL ================================================================ */ ._recordingCell_v3kjh_817 { display: inline-flex; align-items: center; gap: 4px; color: var(--color-primary); font-size: var(--font-size-xs); font-weight: var(--font-weight-medium); cursor: pointer; } ._recordingCell_v3kjh_817:hover { text-decoration: underline; } ._playIcon_v3kjh_845 { color: var(--color-primary); } ._liveRecording_v3kjh_853 { display: inline-flex; align-items: center; gap: 4px; color: var(--color-danger); font-size: var(--font-size-xs); font-weight: var(--font-weight-semibold); animation: _pulse_v3kjh_1 1.5s ease-in-out infinite; } ._liveIcon_v3kjh_873 { color: var(--color-danger); } @keyframes _pulse_v3kjh_1 { 0%, 100% { opacity: 1; } 50% { opacity: 0.4; } } /* ================================================================ ACTIONS CELL ================================================================ */ ._actionsCell_v3kjh_913 { display: flex; align-items: center; gap: var(--space-2); flex-wrap: wrap; } ._followUpBadge_v3kjh_927 { padding: 2px 8px; border-radius: var(--radius-full); background: var(--color-warning-soft, #fff7ed); color: var(--color-warning, #b45309); font-size: 10px; font-weight: var(--font-weight-medium); white-space: nowrap; } ._sentimentBadge_v3kjh_947 { padding: 2px 8px; border-radius: var(--radius-full); background: var(--color-success-soft, #e6f7ec); color: var(--color-success, #16a34a); font-size: 10px; font-weight: var(--font-weight-medium); white-space: nowrap; } /* ================================================================ DASH CELL ================================================================ */ ._dashCell_v3kjh_975 { color: var(--text-secondary); font-size: var(--font-size-xs); } /* ================================================================ LOADING & ERROR STATES ================================================================ */ ._loadingContainer_v3kjh_993 { display: flex; flex-direction: column; align-items: center; justify-content: center; min-height: 400px; gap: var(--space-3); color: var(--text-secondary); } ._loadingContainer_v3kjh_993 ._spinIcon_v3kjh_1013 { font-size: 32px; color: var(--color-primary); animation: _spin_v3kjh_115 1s linear infinite; } ._errorContainer_v3kjh_1025 { display: flex; flex-direction: column; align-items: center; justify-content: center; min-height: 400px; gap: var(--space-3); text-align: center; padding: var(--space-4); } ._errorContainer_v3kjh_1025 svg { color: var(--color-danger); } ._errorContainer_v3kjh_1025 h2 { margin: 0; font-size: var(--font-size-xl); color: var(--text-primary-dark); } ._errorContainer_v3kjh_1025 p { color: var(--text-secondary); max-width: 400px; } /* ================================================================ RESPONSIVE ================================================================ */ @media (max-width: 1400px) { ._progressGrid_v3kjh_297 { grid-template-columns: repeat(3, minmax(0, 1fr)); } ._performanceGrid_v3kjh_427 { grid-template-columns: repeat(3, minmax(0, 1fr)); } ._insightsGrid_v3kjh_475 { grid-template-columns: 1fr 1fr; } } @media (max-width: 1024px) { ._insightsGrid_v3kjh_475 { grid-template-columns: 1fr; } ._progressGrid_v3kjh_297 { grid-template-columns: repeat(3, minmax(0, 1fr)); } ._performanceGrid_v3kjh_427 { grid-template-columns: repeat(3, minmax(0, 1fr)); } } @media (max-width: 768px) { ._progressGrid_v3kjh_297 { grid-template-columns: repeat(2, minmax(0, 1fr)); } ._performanceGrid_v3kjh_427 { grid-template-columns: repeat(2, minmax(0, 1fr)); } ._metaRow_v3kjh_217 { flex-direction: column; align-items: flex-start; gap: var(--space-2); } ._activityHeader_v3kjh_719 { flex-direction: column; } ._topBar_v3kjh_51 { flex-direction: column; align-items: flex-start; gap: var(--space-2); } ._outcomeItem_v3kjh_537 { flex-wrap: wrap; } ._outcomeLabel_v3kjh_549 { min-width: 80px; } ._sentimentGrid_v3kjh_611 { grid-template-columns: 1fr 1fr; } } @media (max-width: 480px) { ._progressGrid_v3kjh_297 { grid-template-columns: 1fr; } ._performanceGrid_v3kjh_427 { grid-template-columns: 1fr; } ._sentimentGrid_v3kjh_611 { grid-template-columns: 1fr; } ._titleRow_v3kjh_151 { flex-direction: column; align-items: flex-start; } ._insightsCard_v3kjh_489 { padding: var(--space-3); } } /* ================================================================ CAMPAIGN PROGRESS GRID (auto-fit instead of fixed 6 cols) ================================================================ */ ._progressGrid_v3kjh_297 { display: grid; grid-template-columns: repeat(auto-fit, minmax(190px, 1fr)); gap: var(--space-3); margin-bottom: var(--space-4); } /* Force a consistent column layout on the shared stat card regardless of what the global .ct-stat-card defines */ ._progressGrid_v3kjh_297 .ct-stat-card, ._performanceGrid_v3kjh_427 .ct-stat-card { display: flex; flex-direction: column; justify-content: flex-start; padding: var(--space-3) var(--space-4); border: 1px solid var(--border-light); border-radius: var(--radius-md); background: var(--color-white); min-height: 96px; } ._statTop_v3kjh_311 { display: flex; align-items: center; justify-content: space-between; margin-bottom: var(--space-2); } ._statLabel_v3kjh_325 { font-size: var(--font-size-xs); color: var(--text-secondary); line-height: 1.2; } ._progressGrid_v3kjh_297 .ct-stat-value, ._performanceGrid_v3kjh_427 .ct-stat-value { display: block; font-size: var(--font-size-lg); font-weight: var(--font-weight-bold); color: var(--text-primary-dark); line-height: 1.2; margin-bottom: 2px; } ._statSub_v3kjh_335 { display: block; margin-top: 0; font-size: var(--font-size-xs); color: var(--text-secondary); line-height: 1.3; } ._statIconSm_v3kjh_347 { width: 24px; height: 24px; flex-shrink: 0; display: flex; align-items: center; justify-content: center; border-radius: var(--radius-full); font-size: 13px; } ._statIconSm_v3kjh_347._blue_v3kjh_369 { background: var(--color-info-soft, #e8f1ff); color: var(--color-info, #2563eb); } ._statIconSm_v3kjh_347._green_v3kjh_379 { background: var(--color-success-soft, #e6f7ec); color: var(--color-success, #16a34a); } ._statIconSm_v3kjh_347._amber_v3kjh_389 { background: var(--color-warning-soft, #fff7ed); color: var(--color-warning, #b45309); } ._statIconSm_v3kjh_347._red_v3kjh_399 { background: var(--color-danger-soft, #fdecec); color: var(--color-danger, #dc2626); } ._statIconSm_v3kjh_347._purple_v3kjh_409 { background: var(--color-purple-soft, #f3e8ff); color: var(--color-purple, #7c3aed); } /* ================================================================ PERFORMANCE GRID (auto-fit instead of fixed 5 cols) ================================================================ */ ._performanceGrid_v3kjh_427 { display: grid; grid-template-columns: repeat(auto-fit, minmax(210px, 1fr)); gap: var(--space-3); margin-bottom: var(--space-4); } ._performanceTop_v3kjh_441 { display: flex; align-items: center; gap: var(--space-2); margin-bottom: var(--space-2); } ._performanceSub_v3kjh_455 { margin-top: 0; font-size: var(--font-size-xs); color: var(--text-secondary); line-height: 1.3; } /* ================================================================ STAT CARDS — colored top accent style ================================================================ */ ._progressGrid_v3kjh_297, ._performanceGrid_v3kjh_427 { display: grid; grid-template-columns: repeat(auto-fit, minmax(190px, 1fr)); gap: var(--space-3); margin-bottom: var(--space-4); } ._statCard_v3kjh_1521 { position: relative; display: flex; flex-direction: column; padding: var(--space-4); background: var(--color-white); border: 1px solid var(--border-light); border-radius: var(--radius-md); border-top: 3px solid transparent; min-height: 90px; overflow: hidden; } ._statCard_v3kjh_1521._blue_v3kjh_369 { border-top-color: var(--color-info, #2563eb); } ._statCard_v3kjh_1521._green_v3kjh_379 { border-top-color: var(--color-success, #16a34a); } ._statCard_v3kjh_1521._amber_v3kjh_389 { border-top-color: var(--color-warning, #f59e0b); } ._statCard_v3kjh_1521._red_v3kjh_399 { border-top-color: var(--color-danger, #dc2626); } ._statCard_v3kjh_1521._purple_v3kjh_409 { border-top-color: var(--color-purple, #7c3aed); } ._statTop_v3kjh_311 { display: flex; align-items: flex-start; justify-content: space-between; margin-bottom: var(--space-2); } ._statLabel_v3kjh_325 { font-size: 11px; font-weight: var(--font-weight-semibold); letter-spacing: 0.04em; text-transform: uppercase; line-height: 1.3; } ._statCard_v3kjh_1521._blue_v3kjh_369 ._statLabel_v3kjh_325 { color: var(--color-info, #2563eb); } ._statCard_v3kjh_1521._green_v3kjh_379 ._statLabel_v3kjh_325 { color: var(--color-success, #16a34a); } ._statCard_v3kjh_1521._amber_v3kjh_389 ._statLabel_v3kjh_325 { color: var(--color-warning, #b45309); } ._statCard_v3kjh_1521._red_v3kjh_399 ._statLabel_v3kjh_325 { color: var(--color-danger, #dc2626); } ._statCard_v3kjh_1521._purple_v3kjh_409 ._statLabel_v3kjh_325 { color: var(--color-purple, #7c3aed); } ._statValue_v3kjh_1657 { font-size: var(--font-size-lg); font-weight: var(--font-weight-bold); color: var(--text-primary-dark); line-height: 1.2; margin-bottom: 2px; } ._statSub_v3kjh_335 { font-size: var(--font-size-xs); color: var(--text-secondary); line-height: 1.3; } ._statIconSm_v3kjh_347 { width: 28px; height: 28px; flex-shrink: 0; display: flex; align-items: center; justify-content: center; border-radius: var(--radius-full); font-size: 14px; } ._statIconSm_v3kjh_347._blue_v3kjh_369 { background: var(--color-info-soft, #e8f1ff); color: var(--color-info, #2563eb); } ._statIconSm_v3kjh_347._green_v3kjh_379 { background: var(--color-success-soft, #e6f7ec); color: var(--color-success, #16a34a); } ._statIconSm_v3kjh_347._amber_v3kjh_389 { background: var(--color-warning-soft, #fff7ed); color: var(--color-warning, #b45309); } ._statIconSm_v3kjh_347._red_v3kjh_399 { background: var(--color-danger-soft, #fdecec); color: var(--color-danger, #dc2626); } ._statIconSm_v3kjh_347._purple_v3kjh_409 { background: var(--color-purple-soft, #f3e8ff); color: var(--color-purple, #7c3aed); } /* ====================================================== RECORDING PLAYER ====================================================== */ ._recordingPlayer_v3kjh_1765 { display: flex; align-items: center; gap: 8px; width: 190px; height: 36px; padding: 4px 8px; background: #f3f4f6; border-radius: 18px; box-sizing: border-box; } ._recordingPlayer_v3kjh_1765 audio { display: none; } ._recordingPlayButton_v3kjh_1797 { width: 28px; height: 28px; min-width: 28px; border: none; border-radius: 50%; background: #e5e7eb; color: #111827; display: flex; align-items: center; justify-content: center; cursor: pointer; padding: 0; } ._recordingPlayButton_v3kjh_1797:hover { background: #dbeafe; color: #2563eb; } ._pauseIcon_v3kjh_1837 { font-size: 10px; letter-spacing: -1px; } ._recordingTime_v3kjh_1847 { font-size: 12px; color: #374151; white-space: nowrap; min-width: 32px; } ._recordingProgress_v3kjh_1861 { flex: 1; min-width: 55px; height: 4px; cursor: pointer; accent-color: #2563eb; } ._recordingDuration_v3kjh_1877 { font-size: 12px; color: #6b7280; white-space: nowrap; }/* VoiceCallCampaignSecondView.module.css */ /* ====================================================== TOP BAR (Back + Refresh) ====================================================== */ ._topBar_321v8_13 { display: flex; align-items: center; justify-content: space-between; /* margin-bottom: 16px; */ flex-wrap: wrap; gap: 10px; } ._refreshBtn_321v8_31 { display: inline-flex; align-items: center; gap: 6px; padding: 6px 14px; font-size: 12.5px; font-weight: 500; color: #6b7280; background: #ffffff; border: 1px solid #e5e7eb; border-radius: 8px; cursor: pointer; transition: all 0.2s ease; flex-shrink: 0; } ._refreshBtn_321v8_31:hover:not(:disabled) { background: #f9fafb; border-color: #d1d5db; } ._refreshBtn_321v8_31:disabled { opacity: 0.6; cursor: not-allowed; } ._spin_321v8_83 { animation: _spin_321v8_83 1s linear infinite; } @keyframes _spin_321v8_83 { from { transform: rotate(0deg); } to { transform: rotate(360deg); } } /* ====================================================== BACK LINK ====================================================== */ ._backLink_321v8_119 { display: inline-flex; align-items: center; gap: 6px; background: none; border: none; padding: 0; font-size: 13px; font-weight: 500; color: #6b7280; cursor: pointer; } ._backLink_321v8_119:hover { color: #111827; } /* ====================================================== LOADING & ERROR STATES ====================================================== */ ._loadingContainer_321v8_161 { display: flex; flex-direction: column; align-items: center; justify-content: center; min-height: 400px; gap: 16px; color: #6b7280; } ._loadingContainer_321v8_161 ._spinIcon_321v8_181 { font-size: 32px; color: #2563eb; animation: _spin_321v8_83 1s linear infinite; } ._errorContainer_321v8_193 { display: flex; flex-direction: column; align-items: center; justify-content: center; min-height: 400px; gap: 12px; text-align: center; padding: 24px; } ._errorContainer_321v8_193 svg { color: #dc2626; } ._errorContainer_321v8_193 h2 { margin: 0; font-size: 22px; font-weight: 700; color: #111827; } ._errorContainer_321v8_193 p { color: #6b7280; max-width: 400px; font-size: 14px; } /* ====================================================== HEADER ====================================================== */ ._headerRow_321v8_257 { display: flex; align-items: flex-start; justify-content: space-between; gap: 16px; /* margin-bottom: 20px; */ flex-wrap: wrap; min-width: 0; } ._headerLeft_321v8_277 { min-width: 0; flex: 1; } ._headerTitleRow_321v8_287 { display: flex; align-items: center; gap: 10px; flex-wrap: wrap; } ._contactName_321v8_301 { font-size: 22px; font-weight: 700; color: #111827; margin: 0; } ._headerSubtitle_321v8_315 { margin: 4px 0 0; font-size: 13px; color: #6b7280; word-break: break-word; } ._headerActions_321v8_329 { display: flex; align-items: center; gap: 8px; flex-shrink: 0; flex-wrap: wrap; } ._headerActions_321v8_329 ._app-btn_321v8_345:disabled { opacity: 0.5; cursor: not-allowed; } ._iconOnlyBtn_321v8_355 { display: inline-flex; align-items: center; justify-content: center; width: 34px; height: 34px; border-radius: 8px; border: 1px solid #e5e7eb; background: #fff; color: #6b7280; cursor: pointer; flex-shrink: 0; } ._iconOnlyBtn_321v8_355:hover { background: #f9fafb; } /* ====================================================== STATUS BADGE ====================================================== */ ._statusBadge_321v8_399 { display: inline-flex; align-items: center; gap: 4px; padding: 3px 10px; border-radius: 999px; font-size: 12px; font-weight: 600; } ._statusBadgeSuccess_321v8_419 { background: #dcfce7; color: #15803d; } /* ====================================================== CALL STEPPER (arrow separators) ====================================================== */ ._stepperCard_321v8_437 { display: flex; align-items: center; justify-content: space-between; gap: 16px; background: #fff; border: 1px solid #e5e7eb; border-radius: 12px; padding: 16px 24px; margin-bottom: 16px; overflow-x: auto; min-width: 0; } ._stepper_321v8_437 { display: flex; align-items: center; gap: 4px; min-width: fit-content; flex-shrink: 0; } ._stepperItem_321v8_481 { display: flex; align-items: center; gap: 8px; } ._stepperNode_321v8_493 { display: flex; align-items: center; gap: 8px; flex-shrink: 0; } ._stepDot_321v8_507 { display: inline-flex; align-items: center; justify-content: center; width: 22px; height: 22px; border-radius: 999px; background: #f3f4f6; color: #9ca3af; border: 1px solid #e5e7eb; flex-shrink: 0; font-size: 10px; } ._stepDotDone_321v8_535 { background: #dcfce7; border-color: #86efac; color: #16a34a; } ._stepDotFinal_321v8_547 { background: #16a34a; border-color: #16a34a; color: #fff; } ._stepLabel_321v8_559 { font-size: 13px; font-weight: 600; color: #374151; white-space: nowrap; } ._stepArrow_321v8_573 { color: #d1d5db; flex-shrink: 0; } ._stepperMeta_321v8_583 { font-size: 12.5px; color: #6b7280; white-space: nowrap; flex-shrink: 0; } ._noTimeline_321v8_597 { font-size: 13px; color: #9ca3af; padding: 4px 0; } /* ====================================================== MAIN GRID ====================================================== */ ._mainGrid_321v8_617 { display: grid; grid-template-columns: 1fr 1.4fr; gap: 20px; align-items: flex-start; min-width: 0; } ._conversationCol_321v8_633 { display: flex; flex-direction: column; /* gap: 16px; */ min-width: 0; } ._sideCol_321v8_647 { display: flex; flex-direction: column; gap: 20px; min-width: 0; } ._card_321v8_661 { background: #fff; border: 1px solid #e5e7eb; border-radius: 12px; padding: 20px; min-width: 0; } ._cardTitle_321v8_677 { display: flex; align-items: center; gap: 6px; font-size: 15px; font-weight: 700; color: #111827; margin: 0 0 16px; } ._sparkleIcon_321v8_697 { color: #7c3aed; flex-shrink: 0; } /* ====================================================== CALL DETAILS ====================================================== */ ._callDetailsHead_321v8_715 { display: flex; align-items: center; gap: 12px; margin-bottom: 16px; flex-wrap: wrap; } ._detailsAvatar_321v8_731 { width: 40px; height: 40px; flex-shrink: 0; display: inline-flex; align-items: center; justify-content: center; border-radius: 999px; background: #dbeafe; color: #2563eb; font-size: 14px; font-weight: 700; } ._detailsHeadText_321v8_759 { display: flex; flex-direction: column; min-width: 0; flex: 1; } ._detailsName_321v8_773 { font-size: 14px; font-weight: 700; color: #111827; } ._detailsLocation_321v8_785 { font-size: 12px; color: #9ca3af; } ._directionBadge_321v8_795 { display: inline-flex; align-items: center; gap: 5px; padding: 3px 10px; border-radius: 999px; background: #dcfce7; color: #15803d; font-size: 11.5px; font-weight: 600; white-space: nowrap; flex-shrink: 0; } ._detailsGrid_321v8_823 { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); row-gap: 14px; column-gap: 12px; padding-bottom: 18px; margin-bottom: 18px; border-bottom: 1px solid #f3f4f6; } ._detailsItem_321v8_843 { display: flex; flex-direction: column; gap: 3px; min-width: 0; } ._detailsLabel_321v8_857 { font-size: 11.5px; color: #9ca3af; text-transform: uppercase; letter-spacing: 0.3px; } ._detailsValue_321v8_871 { font-size: 13px; font-weight: 600; color: #111827; overflow-wrap: anywhere; word-break: break-word; } ._detailsValueSuccess_321v8_887 { color: #16a34a; } /* ====================================================== RECORDING ====================================================== */ ._recordingBlock_321v8_903 { display: flex; flex-direction: column; gap: 10px; } ._recordingLabel_321v8_915 { font-size: 13px; font-weight: 700; color: #111827; } ._recordingPlayer_321v8_927 { display: flex; align-items: center; gap: 8px; padding: 10px 12px; border: 1px solid #e5e7eb; border-radius: 10px; background: #f9fafb; min-width: 0; flex-wrap: wrap; } ._playBtn_321v8_951 { width: 30px; height: 30px; flex-shrink: 0; display: inline-flex; align-items: center; justify-content: center; border-radius: 999px; border: none; background: #2563eb; color: #fff; cursor: pointer; transition: background 0.2s ease; } ._playBtn_321v8_951:hover:not(:disabled) { background: #1d4ed8; } ._playBtn_321v8_951:disabled { opacity: 0.5; cursor: not-allowed; background: #9ca3af; } ._recordingTime_321v8_1001 { font-size: 11.5px; color: #6b7280; white-space: nowrap; flex-shrink: 0; } ._waveform_321v8_1015 { flex: 1; min-width: 60px; display: flex; align-items: center; gap: 2px; overflow: hidden; height: 24px; } ._waveformBar_321v8_1035 { width: 2px; min-width: 2px; border-radius: 999px; background: #93c5fd; flex-shrink: 0; transition: height 0.3s ease; } ._recordingIconBtn_321v8_1053 { width: 26px; height: 26px; flex-shrink: 0; display: inline-flex; align-items: center; justify-content: center; border: none; border-radius: 6px; background: transparent; color: #6b7280; cursor: pointer; transition: all 0.2s ease; } ._recordingIconBtn_321v8_1053:hover:not(:disabled) { background: #eef2ff; color: #2563eb; } ._recordingIconBtn_321v8_1053:disabled { opacity: 0.4; cursor: not-allowed; } ._speedBtn_321v8_1103 { flex-shrink: 0; padding: 4px 8px; border: 1px solid #e5e7eb; border-radius: 6px; background: #fff; color: #374151; font-size: 11.5px; font-weight: 600; cursor: pointer; transition: all 0.2s ease; } ._speedBtn_321v8_1103:hover:not(:disabled) { border-color: #93c5fd; color: #2563eb; } ._speedBtn_321v8_1103:disabled { opacity: 0.4; cursor: not-allowed; } /* ====================================================== AI CALL SUMMARY ====================================================== */ ._summaryText_321v8_1157 { font-size: 13px; color: #4b5563; line-height: 1.6; margin: 0 0 16px; } ._summaryStatsGrid_321v8_1171 { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 10px; } ._summaryStat_321v8_1171 { display: flex; flex-direction: column; gap: 4px; padding: 10px; border: 1px solid #f3f4f6; border-radius: 8px; background: #f9fafb; min-width: 0; } ._summaryStatLabel_321v8_1205 { font-size: 11px; color: #9ca3af; text-transform: uppercase; letter-spacing: 0.3px; } ._summaryStatValue_321v8_1219 { font-size: 12.5px; font-weight: 700; color: #111827; overflow-wrap: anywhere; word-break: break-word; } ._summaryStatSuccess_321v8_1235 { color: #16a34a; } ._summaryStatLink_321v8_1243 { color: #2563eb; cursor: pointer; } ._summaryStatLink_321v8_1243:hover { text-decoration: underline; } /* ====================================================== CALL INSIGHTS ====================================================== */ ._insightsRow_321v8_1269 { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 12px; } ._insightItem_321v8_1281 { display: flex; align-items: flex-start; gap: 8px; min-width: 0; } ._insightIcon_321v8_1295 { width: 26px; height: 26px; flex-shrink: 0; display: inline-flex; align-items: center; justify-content: center; border-radius: 999px; background: #eff6ff; color: #2563eb; font-size: 13px; } ._insightText_321v8_1321 { display: flex; flex-direction: column; min-width: 0; } ._insightValue_321v8_1333 { font-size: 12.5px; font-weight: 700; color: #111827; overflow-wrap: anywhere; word-break: break-word; } ._insightLabel_321v8_1349 { font-size: 11px; color: #9ca3af; } /* ====================================================== CONVERSATION HEADER ====================================================== */ ._conversationHeaderRow_321v8_1367 { display: flex; align-items: center; justify-content: space-between; flex-wrap: wrap; gap: 10px; margin-bottom: 14px; } ._conversationHeaderRow_321v8_1367 ._cardTitle_321v8_677 { margin: 0; } ._conversationHeaderActions_321v8_1393 { display: flex; align-items: center; gap: 8px; flex-wrap: wrap; } ._conversationHeaderActions_321v8_1393 ._app-btn_321v8_345:disabled { opacity: 0.5; cursor: not-allowed; } ._iconOnlyBtnSm_321v8_1417 { width: 32px; height: 32px; flex-shrink: 0; display: inline-flex; align-items: center; justify-content: center; border: 1px solid #e5e7eb; border-radius: 8px; background: #fff; color: #6b7280; cursor: pointer; transition: all 0.2s ease; } ._iconOnlyBtnSm_321v8_1417:hover { background: #f9fafb; border-color: #d1d5db; } ._dropdownBtn_321v8_1457 { display: inline-flex; align-items: center; gap: 6px; padding: 7px 12px; border: 1px solid #e5e7eb; border-radius: 8px; background: #fff; color: #374151; font-size: 12.5px; font-weight: 600; cursor: pointer; white-space: nowrap; transition: all 0.2s ease; } ._dropdownBtn_321v8_1457:hover { background: #f9fafb; border-color: #d1d5db; } /* ====================================================== CONVERSATION SUBHEAD ====================================================== */ ._conversationSubHeadRow_321v8_1507 { display: flex; align-items: center; justify-content: space-between; flex-wrap: wrap; gap: 10px; padding-bottom: 14px; margin-bottom: 14px; border-bottom: 1px solid #f3f4f6; } ._conversationContactRow_321v8_1529 { display: flex; align-items: center; gap: 10px; min-width: 0; } ._conversationAvatar_321v8_1543 { width: 34px; height: 34px; flex-shrink: 0; display: inline-flex; align-items: center; justify-content: center; border-radius: 999px; background: #dbeafe; color: #2563eb; font-size: 12.5px; font-weight: 700; } ._conversationContactText_321v8_1571 { display: flex; flex-direction: column; min-width: 0; } ._conversationContactName_321v8_1583 { font-size: 13.5px; font-weight: 700; color: #111827; } ._conversationContactSub_321v8_1595 { font-size: 11.5px; color: #9ca3af; } ._sentimentBadge_321v8_1605 { display: inline-flex; align-items: center; gap: 5px; padding: 4px 10px; border-radius: 999px; border: 1px solid #86efac; background: #f0fdf4; color: #16a34a; font-size: 12px; font-weight: 600; white-space: nowrap; flex-shrink: 0; } ._sentimentPositive_321v8_1635 { border-color: #86efac; background: #f0fdf4; color: #16a34a; } ._sentimentNeutral_321v8_1647 { border-color: #fcd34d; background: #fffbeb; color: #b45309; } ._sentimentNegative_321v8_1659 { border-color: #fca5a5; background: #fef2f2; color: #dc2626; } /* ====================================================== CONVERSATION BODY ====================================================== */ ._conversationBody_321v8_1679 { display: flex; flex-direction: column; gap: 16px; max-height: 560px; overflow-y: auto; padding-right: 4px; } /* Scrollbar styling for conversation body */ ._conversationBody_321v8_1679::-webkit-scrollbar { width: 4px; } ._conversationBody_321v8_1679::-webkit-scrollbar-track { background: transparent; } ._conversationBody_321v8_1679::-webkit-scrollbar-thumb { background: #d1d5db; border-radius: 2px; } ._conversationBody_321v8_1679::-webkit-scrollbar-thumb:hover { background: #9ca3af; } ._messageRow_321v8_1733 { display: flex; align-items: flex-end; gap: 8px; min-width: 0; } ._messageRowContact_321v8_1747 { justify-content: flex-start; } ._messageRowAi_321v8_1755 { justify-content: flex-end; } ._messageAvatar_321v8_1763 { width: 26px; height: 26px; flex-shrink: 0; display: inline-flex; align-items: center; justify-content: center; border-radius: 999px; background: #f3f4f6; color: #6b7280; font-size: 10.5px; font-weight: 700; } ._messageAvatarAi_321v8_1791 { width: 26px; height: 26px; flex-shrink: 0; display: inline-flex; align-items: center; justify-content: center; border-radius: 999px; background: #2563eb; color: #fff; font-size: 12px; } ._messageBubble_321v8_1817 { max-width: 62%; min-width: 0; padding: 10px 14px; border-radius: 12px; position: relative; } ._messageBubbleContact_321v8_1833 { background: #f3f4f6; border-bottom-left-radius: 4px; } ._messageBubbleAi_321v8_1843 { background: #eff6ff; border-bottom-right-radius: 4px; } ._messageText_321v8_1853 { font-size: 13px; color: #1f2937; line-height: 1.55; margin: 0 0 4px; overflow-wrap: anywhere; word-break: break-word; } ._messageTime_321v8_1871 { display: block; font-size: 10.5px; color: #9ca3af; text-align: right; margin-top: 2px; } /* ====================================================== NO CONVERSATION (empty state) ====================================================== */ ._noConversation_321v8_1895 { display: flex; flex-direction: column; align-items: center; justify-content: center; padding: 40px 20px; gap: 8px; text-align: center; color: #6b7280; } ._noConversation_321v8_1895 svg { color: #9ca3af; } ._noConversation_321v8_1895 p { font-size: 14px; font-weight: 500; margin: 4px 0 0; color: #4b5563; } ._noConversation_321v8_1895 span { font-size: 13px; color: #9ca3af; max-width: 300px; } /* ====================================================== CONVERSATION EVENT (system marker) ====================================================== */ ._conversationEvent_321v8_1959 { display: flex; align-items: center; gap: 10px; margin: 4px 0; } ._conversationEventLine_321v8_1973 { flex: 1; height: 1px; background: #e5e7eb; } ._conversationEventPill_321v8_1985 { flex-shrink: 0; padding: 4px 12px; border-radius: 999px; border: 1px solid #bfdbfe; background: #eff6ff; color: #2563eb; font-size: 11px; font-weight: 600; white-space: nowrap; } /* ====================================================== CONVERSATION FOOTER ====================================================== */ ._conversationFooter_321v8_2017 { display: flex; align-items: center; justify-content: space-between; gap: 12px; flex-wrap: wrap; margin-top: 18px; padding-top: 16px; border-top: 1px solid #f3f4f6; } ._aiNoteText_321v8_2039 { display: inline-flex; align-items: center; gap: 6px; font-size: 12px; color: #9ca3af; } ._conversationFooterActions_321v8_2055 { display: flex; align-items: center; gap: 8px; flex-wrap: wrap; } ._conversationFooterActions_321v8_2055 ._app-btn_321v8_345:disabled { opacity: 0.5; cursor: not-allowed; } /* ====================================================== RESPONSIVE ====================================================== */ @media (max-width: 960px) { ._mainGrid_321v8_617 { grid-template-columns: 1fr; } ._summaryStatsGrid_321v8_1171 { grid-template-columns: repeat(2, minmax(0, 1fr)); } ._insightsRow_321v8_1269 { grid-template-columns: repeat(2, minmax(0, 1fr)); } } @media (max-width: 768px) { ._topBar_321v8_13 { flex-direction: column; align-items: flex-start; } ._headerRow_321v8_257 { flex-direction: column; align-items: stretch; } ._headerActions_321v8_329 { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 8px; } ._headerActions_321v8_329 ._iconOnlyBtn_321v8_355 { grid-column: 1 / -1; width: 100%; } ._stepperCard_321v8_437 { flex-direction: column; align-items: flex-start; padding: 14px 16px; } ._stepper_321v8_437 { flex-wrap: wrap; gap: 2px; } ._stepperItem_321v8_481 { gap: 4px; } ._stepLabel_321v8_559 { font-size: 11px; } ._conversationHeaderActions_321v8_1393 { width: 100%; } ._conversationHeaderActions_321v8_1393 ._dropdownBtn_321v8_1457 { flex: 1; } ._messageBubble_321v8_1817 { max-width: 78%; } ._summaryStatsGrid_321v8_1171 { grid-template-columns: repeat(2, minmax(0, 1fr)); } ._insightsRow_321v8_1269 { grid-template-columns: repeat(2, minmax(0, 1fr)); } } @media (max-width: 560px) { ._card_321v8_661 { padding: 16px; } ._stepperCard_321v8_437 { padding: 12px 14px; } ._headerActions_321v8_329 { grid-template-columns: 1fr; } ._headerActions_321v8_329 ._iconOnlyBtn_321v8_355 { grid-column: auto; } ._detailsGrid_321v8_823 { grid-template-columns: 1fr; } ._summaryStatsGrid_321v8_1171 { grid-template-columns: 1fr; } ._insightsRow_321v8_1269 { grid-template-columns: 1fr; } ._conversationHeaderRow_321v8_1367 { flex-direction: column; align-items: stretch; } ._conversationHeaderActions_321v8_1393 { flex-direction: column; align-items: stretch; } ._conversationHeaderActions_321v8_1393 .app-btn { width: 100%; justify-content: center; } ._conversationSubHeadRow_321v8_1507 { flex-direction: column; align-items: flex-start; } ._conversationFooter_321v8_2017 { flex-direction: column; align-items: stretch; } ._conversationFooterActions_321v8_2055 { flex-direction: column; } ._conversationFooterActions_321v8_2055 .app-btn { width: 100%; justify-content: center; } ._messageBubble_321v8_1817 { max-width: 88%; } ._recordingPlayer_321v8_927 { flex-wrap: wrap; justify-content: center; } ._waveform_321v8_1015 { order: 5; width: 100%; min-width: 100%; margin-top: 6px; } ._contactName_321v8_301 { font-size: 19px; } } @media (max-width: 420px) { ._contactName_321v8_301 { font-size: 17px; } ._stepLabel_321v8_559 { font-size: 10px; } ._messageBubble_321v8_1817 { max-width: 100%; padding: 8px 12px; } ._messageText_321v8_1853 { font-size: 12px; } ._conversationEventPill_321v8_1985 { font-size: 10px; padding: 3px 10px; } ._recordingPlayer_321v8_927 { gap: 4px; padding: 8px; } ._playBtn_321v8_951 { width: 26px; height: 26px; } } /* ═══════════════════════════════════════════════════════════════ FLOWLABS - FLOW BUILDER ═══════════════════════════════════════════════════════════════ */ /* ================================================================ PAGE ================================================================ */ ._page_1tv55_17 { width: 100%; min-height: 100%; padding: 15px 5px; box-sizing: border-box; background: var(--color-bg-light); } /* ================================================================ HEADER ================================================================ */ ._topBar_1tv55_47 { display: flex; justify-content: space-between; align-items: flex-start; gap: 20px; /* margin-bottom: 24px; */ } ._breadcrumb_1tv55_71 { display: flex; align-items: center; gap: 8px; color: var(--text-muted); font-size: 12px; margin-bottom: 8px; } ._breadcrumb_1tv55_71 span { color: var(--border-default); } ._topBar_1tv55_47 h1 { margin: 0; color: var(--text-primary-dark); font-size: 18px; font-weight: 700; } ._topBar_1tv55_47 p { color: var(--text-muted); font-size: 13px; } /* ================================================================ ADMIN HEADER BADGE ================================================================ */ ._heading_1tv55_147 { display: flex; align-items: center; gap: 10px; } ._heading_1tv55_147 h2 { margin: 0; } ._heading_1tv55_147 span { padding: 4px 10px; border-radius: 999px; font-size: 11px; font-weight: 600; color: var(--color-primary); background: color-mix(in srgb, var(--color-primary) 10%, var(--color-white)); } /* ================================================================ STAT CARDS ================================================================ */ ._statsGrid_1tv55_207 { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 16px; margin-bottom: 24px; } ._statCard_1tv55_227 { display: flex; align-items: center; gap: 14px; padding: 16px; border-radius: var(--radius-lg); background: var(--color-white); border: 1px solid var(--border-light); box-shadow: var(--shadow-sm); } ._statCard_1tv55_227 span { display: block; font-size: 12px; color: var(--text-muted); } ._statCard_1tv55_227 strong { display: block; margin-top: 4px; font-size: 22px; color: var(--text-primary-dark); } /* ================================================================ STAT ICON ================================================================ */ ._statIcon_1tv55_307 { width: 42px; height: 42px; flex-shrink: 0; display: flex; align-items: center; justify-content: center; border-radius: var(--radius-full); font-size: 20px; } ._statIcon_1tv55_307 svg { width: 20px; height: 20px; } /* ================================================================ ALL FLOWS ================================================================ */ ._statAll_1tv55_363 { color: var(--color-primary); background: color-mix(in srgb, var(--color-primary) 10%, var(--color-white)); border: 1px solid color-mix(in srgb, var(--color-primary) 15%, var(--border-light)); } /* ================================================================ ACTIVE ================================================================ */ ._statActive_1tv55_389 { color: var(--color-success); background: color-mix(in srgb, var(--color-success) 10%, var(--color-white)); border: 1px solid color-mix(in srgb, var(--color-success) 18%, var(--border-light)); } /* ================================================================ DRAFT ================================================================ */ ._statDraft_1tv55_415 { color: var(--color-warning); background: color-mix(in srgb, var(--color-warning) 10%, var(--color-white)); border: 1px solid color-mix(in srgb, var(--color-warning) 18%, var(--border-light)); } /* ================================================================ COMPLETED ================================================================ */ ._statCompleted_1tv55_441 { color: #7c3aed; background: color-mix(in srgb, #7c3aed 10%, var(--color-white)); border: 1px solid color-mix(in srgb, #7c3aed 18%, var(--border-light)); } /* ================================================================ TABLE SECTION ================================================================ */ ._tableSection_1tv55_465 { background: var(--color-white); border: 1px solid var(--border-light); border-radius: var(--radius-lg); padding: 18px; } ._tableHeader_1tv55_485 { display: flex; justify-content: space-between; align-items: center; margin-bottom: 14px; } ._tableHeader_1tv55_485 h3 { margin: 0; font-size: 16px; color: var(--text-primary-dark); } ._tableHeader_1tv55_485 p { margin: 4px 0 0; font-size: 12px; color: var(--text-muted); } ._countBox_1tv55_537 { display: flex; align-items: center; gap: 8px; padding: 8px 12px; border-radius: var(--radius-md); background: var(--color-bg-light); color: var(--text-muted); font-size: 12px; } ._countBox_1tv55_537 svg { color: var(--color-primary); } /* ================================================================ FLOW CELL ================================================================ */ ._flowCell_1tv55_589 { display: flex; align-items: center; gap: 12px; min-width: 0; } ._flowPreview_1tv55_609 { width: 38px; height: 38px; flex-shrink: 0; display: flex; align-items: center; justify-content: center; border-radius: var(--radius-sm); background: color-mix(in srgb, var(--color-primary) 10%, var(--color-white)); color: var(--color-primary); border: 1px solid var(--border-light); } ._flowPreview_1tv55_609 svg { width: 18px; height: 18px; } ._flowMeta_1tv55_665 { display: flex; flex-direction: column; gap: 3px; min-width: 0; } ._flowMeta_1tv55_665 strong { max-width: 220px; overflow: hidden; white-space: nowrap; text-overflow: ellipsis; font-size: var(--font-size-xs); color: var(--text-primary-dark); font-weight: 600; } ._flowMeta_1tv55_665 span { font-size: 10px; color: var(--text-muted); } /* ================================================================ DESCRIPTION ================================================================ */ ._description_1tv55_737 { display: block; max-width: 280px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; color: var(--text-muted); font-size: 12px; } /* ================================================================ STATUS BADGE ================================================================ */ ._statusBadge_1tv55_777 { display: inline-flex; align-items: center; gap: 6px; padding: 4px 10px; border-radius: 999px; font-size: 11px; font-weight: 600; } ._statusBadge_1tv55_777 span { width: 6px; height: 6px; border-radius: 50%; } ._active_1tv55_825 { color: var(--color-success); background: color-mix(in srgb, var(--color-success) 10%, white); } ._active_1tv55_825 span { background: var(--color-success); } ._draft_1tv55_845 { color: var(--color-warning); background: color-mix(in srgb, var(--color-warning) 10%, white); } ._draft_1tv55_845 span { background: var(--color-warning); } /* ================================================================ RESPONSIVE ================================================================ */ @media (max-width: 1100px) { ._statsGrid_1tv55_207 { grid-template-columns: repeat(2, minmax(0, 1fr)); } } @media (max-width: 700px) { ._page_1tv55_17 { padding: 16px; } ._topBar_1tv55_47 { flex-direction: column; } ._statsGrid_1tv55_207 { grid-template-columns: 1fr; } ._flowMeta_1tv55_665 strong { max-width: 140px; } } ._node_1vgn9_1 { position: relative; width: 150px; min-height: 62px; display: flex; flex-direction: column; align-items: center; box-sizing: border-box; } /* ========================================================= BRANCH CARD ========================================================= */ ._card_1vgn9_35 { width: 150px; min-height: 52px; display: flex; align-items: center; justify-content: center; gap: 8px; padding: 10px 12px; box-sizing: border-box; background: #ffffff; border: 1px solid #dce3ec; border-radius: 12px; box-shadow: 0 3px 10px rgba(15, 23, 42, 0.05); } /* ========================================================= ICON ========================================================= */ ._icon_1vgn9_89 { width: 28px; height: 28px; flex-shrink: 0; display: flex; align-items: center; justify-content: center; background: #eef2ff; color: #6366f1; border-radius: 8px; } /* ========================================================= LABEL ========================================================= */ ._label_1vgn9_131 { min-width: 0; color: #07152f; font-size: 13px; font-weight: 600; line-height: 1.2; text-align: center; white-space: nowrap; } /* ========================================================= TOP TARGET ========================================================= */ ._topHandle_1vgn9_169 { width: 10px !important; height: 10px !important; top: -5px !important; background: #94a3b8 !important; border: 2px solid #ffffff !important; border-radius: 50% !important; box-shadow: none !important; transform: translateX(-50%) !important; transition: none !important; z-index: 10; } /* ========================================================= BOTTOM SOURCE ========================================================= */ ._bottomHandle_1vgn9_219 { width: 10px !important; height: 10px !important; bottom: -5px !important; background: #94a3b8 !important; border: 2px solid #ffffff !important; border-radius: 50% !important; box-shadow: none !important; transform: translateX(-50%) !important; transition: none !important; z-index: 10; } /* ========================================================= REMOVE HOVER EFFECT ========================================================= */ ._topHandle_1vgn9_169:hover, ._bottomHandle_1vgn9_219:hover, ._topHandle_1vgn9_169._react-flow__handle_1vgn9_273:hover, ._bottomHandle_1vgn9_219._react-flow__handle_1vgn9_273:hover { width: 10px !important; height: 10px !important; background: #94a3b8 !important; border: 2px solid #ffffff !important; box-shadow: none !important; outline: none !important; transform: translateX(-50%) !important; } /* ========================================================= REMOVE FOCUS ========================================================= */ ._topHandle_1vgn9_169:focus, ._bottomHandle_1vgn9_219:focus { outline: none !important; box-shadow: none !important; } /* ========================================================= NO HANDLE ANIMATION ========================================================= */ ._topHandle_1vgn9_169, ._bottomHandle_1vgn9_219 { transition: none !important; animation: none !important; } /* this gets exported as style.css and can be used for the default theming */ /* these are the necessary styles for React/Svelte Flow, they get used by base.css and style.css */ .react-flow { direction: ltr; --xy-edge-stroke-default: #b1b1b7; --xy-edge-stroke-width-default: 1; --xy-edge-stroke-selected-default: #555; --xy-connectionline-stroke-default: #b1b1b7; --xy-connectionline-stroke-width-default: 1; --xy-attribution-background-color-default: rgba(255, 255, 255, 0.5); --xy-minimap-background-color-default: #fff; --xy-minimap-mask-background-color-default: rgba(240, 240, 240, 0.6); --xy-minimap-mask-stroke-color-default: transparent; --xy-minimap-mask-stroke-width-default: 1; --xy-minimap-node-background-color-default: #e2e2e2; --xy-minimap-node-stroke-color-default: transparent; --xy-minimap-node-stroke-width-default: 2; --xy-background-color-default: transparent; --xy-background-pattern-dots-color-default: #91919a; --xy-background-pattern-lines-color-default: #eee; --xy-background-pattern-cross-color-default: #e2e2e2; background-color: var(--xy-background-color, var(--xy-background-color-default)); --xy-node-color-default: inherit; --xy-node-border-default: 1px solid #1a192b; --xy-node-background-color-default: #fff; --xy-node-group-background-color-default: rgba(240, 240, 240, 0.25); --xy-node-boxshadow-hover-default: 0 1px 4px 1px rgba(0, 0, 0, 0.08); --xy-node-boxshadow-selected-default: 0 0 0 0.5px #1a192b; --xy-node-border-radius-default: 3px; --xy-handle-background-color-default: #1a192b; --xy-handle-border-color-default: #fff; --xy-selection-background-color-default: rgba(0, 89, 220, 0.08); --xy-selection-border-default: 1px dotted rgba(0, 89, 220, 0.8); --xy-controls-button-background-color-default: #fefefe; --xy-controls-button-background-color-hover-default: #f4f4f4; --xy-controls-button-color-default: inherit; --xy-controls-button-color-hover-default: inherit; --xy-controls-button-border-color-default: #eee; --xy-controls-box-shadow-default: 0 0 2px 1px rgba(0, 0, 0, 0.08); --xy-edge-label-background-color-default: #ffffff; --xy-edge-label-color-default: inherit; --xy-resize-background-color-default: #3367d9; } .react-flow.dark { --xy-edge-stroke-default: #3e3e3e; --xy-edge-stroke-width-default: 1; --xy-edge-stroke-selected-default: #727272; --xy-connectionline-stroke-default: #b1b1b7; --xy-connectionline-stroke-width-default: 1; --xy-attribution-background-color-default: rgba(150, 150, 150, 0.25); --xy-minimap-background-color-default: #141414; --xy-minimap-mask-background-color-default: rgba(60, 60, 60, 0.6); --xy-minimap-mask-stroke-color-default: transparent; --xy-minimap-mask-stroke-width-default: 1; --xy-minimap-node-background-color-default: #2b2b2b; --xy-minimap-node-stroke-color-default: transparent; --xy-minimap-node-stroke-width-default: 2; --xy-background-color-default: #141414; --xy-background-pattern-dots-color-default: #555; --xy-background-pattern-lines-color-default: #333; --xy-background-pattern-cross-color-default: #333; --xy-node-color-default: #f8f8f8; --xy-node-border-default: 1px solid #3c3c3c; --xy-node-background-color-default: #1e1e1e; --xy-node-group-background-color-default: rgba(240, 240, 240, 0.25); --xy-node-boxshadow-hover-default: 0 1px 4px 1px rgba(255, 255, 255, 0.08); --xy-node-boxshadow-selected-default: 0 0 0 0.5px #999; --xy-handle-background-color-default: #bebebe; --xy-handle-border-color-default: #1e1e1e; --xy-selection-background-color-default: rgba(200, 200, 220, 0.08); --xy-selection-border-default: 1px dotted rgba(200, 200, 220, 0.8); --xy-controls-button-background-color-default: #2b2b2b; --xy-controls-button-background-color-hover-default: #3e3e3e; --xy-controls-button-color-default: #f8f8f8; --xy-controls-button-color-hover-default: #fff; --xy-controls-button-border-color-default: #5b5b5b; --xy-controls-box-shadow-default: 0 0 2px 1px rgba(0, 0, 0, 0.08); --xy-edge-label-background-color-default: #141414; --xy-edge-label-color-default: #f8f8f8; } .react-flow__background { background-color: var(--xy-background-color-props, var(--xy-background-color, var(--xy-background-color-default))); pointer-events: none; z-index: -1; } .react-flow__container { position: absolute; width: 100%; height: 100%; top: 0; left: 0; } .react-flow__pane { z-index: 1; touch-action: none; } .react-flow__pane.draggable { cursor: grab; } .react-flow__pane.dragging { cursor: grabbing; } .react-flow__pane.selection { cursor: pointer; } .react-flow__viewport { transform-origin: 0 0; z-index: 2; pointer-events: none; } .react-flow__renderer { z-index: 4; } .react-flow__selection { z-index: 6; } .react-flow__nodesselection-rect:focus, .react-flow__nodesselection-rect:focus-visible { outline: none; } .react-flow__edge-path { stroke: var(--xy-edge-stroke, var(--xy-edge-stroke-default)); stroke-width: var(--xy-edge-stroke-width, var(--xy-edge-stroke-width-default)); fill: none; } .react-flow__connection-path { stroke: var(--xy-connectionline-stroke, var(--xy-connectionline-stroke-default)); stroke-width: var(--xy-connectionline-stroke-width, var(--xy-connectionline-stroke-width-default)); fill: none; } .react-flow .react-flow__edges { position: absolute; } .react-flow .react-flow__edges svg { overflow: visible; position: absolute; pointer-events: none; } .react-flow__edge { pointer-events: visibleStroke; } .react-flow__edge.selectable { cursor: pointer; } .react-flow__edge.animated path { stroke-dasharray: 5; animation: dashdraw 0.5s linear infinite; } .react-flow__edge.animated path.react-flow__edge-interaction { stroke-dasharray: none; animation: none; } .react-flow__edge.inactive { pointer-events: none; } .react-flow__edge.selected, .react-flow__edge:focus, .react-flow__edge:focus-visible { outline: none; } .react-flow__edge.selected .react-flow__edge-path, .react-flow__edge.selectable:focus .react-flow__edge-path, .react-flow__edge.selectable:focus-visible .react-flow__edge-path { stroke: var(--xy-edge-stroke-selected, var(--xy-edge-stroke-selected-default)); } .react-flow__edge-textwrapper { pointer-events: all; } .react-flow__edge .react-flow__edge-text { pointer-events: none; -webkit-user-select: none; -moz-user-select: none; user-select: none; } /* Arrowhead marker styles - use CSS custom properties as default */ .react-flow__arrowhead polyline { stroke: var(--xy-edge-stroke, var(--xy-edge-stroke-default)); } .react-flow__arrowhead polyline.arrowclosed { fill: var(--xy-edge-stroke, var(--xy-edge-stroke-default)); } .react-flow__connection { pointer-events: none; } .react-flow__connection .animated { stroke-dasharray: 5; animation: dashdraw 0.5s linear infinite; } svg.react-flow__connectionline { z-index: 1001; overflow: visible; position: absolute; } .react-flow__nodes { pointer-events: none; transform-origin: 0 0; } .react-flow__node { position: absolute; -webkit-user-select: none; -moz-user-select: none; user-select: none; pointer-events: all; transform-origin: 0 0; box-sizing: border-box; cursor: default; } .react-flow__node.selectable { cursor: pointer; } .react-flow__node.draggable { cursor: grab; pointer-events: all; } .react-flow__node.draggable.dragging { cursor: grabbing; } .react-flow__nodesselection { z-index: 3; transform-origin: left top; pointer-events: none; } .react-flow__nodesselection-rect { position: absolute; pointer-events: all; cursor: grab; } .react-flow__handle { position: absolute; pointer-events: none; min-width: 5px; min-height: 5px; width: 6px; height: 6px; background-color: var(--xy-handle-background-color, var(--xy-handle-background-color-default)); border: 1px solid var(--xy-handle-border-color, var(--xy-handle-border-color-default)); border-radius: 100%; } .react-flow__handle.connectingfrom { pointer-events: all; } .react-flow__handle.connectionindicator { pointer-events: all; cursor: crosshair; } .react-flow__handle-bottom { top: auto; left: 50%; bottom: 0; transform: translate(-50%, 50%); } .react-flow__handle-top { top: 0; left: 50%; transform: translate(-50%, -50%); } .react-flow__handle-left { top: 50%; left: 0; transform: translate(-50%, -50%); } .react-flow__handle-right { top: 50%; right: 0; transform: translate(50%, -50%); } .react-flow__edgeupdater { cursor: move; pointer-events: all; } .react-flow__pane.selection .react-flow__panel { pointer-events: none; } .react-flow__panel { position: absolute; z-index: 5; margin: 15px; } .react-flow__panel.top { top: 0; } .react-flow__panel.bottom { bottom: 0; } .react-flow__panel.top.center, .react-flow__panel.bottom.center { left: 50%; transform: translateX(-15px) translateX(-50%); } .react-flow__panel.left { left: 0; } .react-flow__panel.right { right: 0; } .react-flow__panel.left.center, .react-flow__panel.right.center { top: 50%; transform: translateY(-15px) translateY(-50%); } .react-flow__attribution { font-size: 10px; background: var(--xy-attribution-background-color, var(--xy-attribution-background-color-default)); padding: 2px 3px; margin: 0; } .react-flow__attribution a { text-decoration: none; color: #999; } @keyframes dashdraw { from { stroke-dashoffset: 10; } } .react-flow__edgelabel-renderer { position: absolute; width: 100%; height: 100%; pointer-events: none; -webkit-user-select: none; -moz-user-select: none; user-select: none; left: 0; top: 0; } .react-flow__viewport-portal { position: absolute; width: 100%; height: 100%; left: 0; top: 0; -webkit-user-select: none; -moz-user-select: none; user-select: none; } .react-flow__minimap { background: var( --xy-minimap-background-color-props, var(--xy-minimap-background-color, var(--xy-minimap-background-color-default)) ); } .react-flow__minimap-svg { display: block; } .react-flow__minimap-mask { fill: var( --xy-minimap-mask-background-color-props, var(--xy-minimap-mask-background-color, var(--xy-minimap-mask-background-color-default)) ); stroke: var( --xy-minimap-mask-stroke-color-props, var(--xy-minimap-mask-stroke-color, var(--xy-minimap-mask-stroke-color-default)) ); stroke-width: var( --xy-minimap-mask-stroke-width-props, var(--xy-minimap-mask-stroke-width, var(--xy-minimap-mask-stroke-width-default)) ); } .react-flow__minimap-node { fill: var( --xy-minimap-node-background-color-props, var(--xy-minimap-node-background-color, var(--xy-minimap-node-background-color-default)) ); stroke: var( --xy-minimap-node-stroke-color-props, var(--xy-minimap-node-stroke-color, var(--xy-minimap-node-stroke-color-default)) ); stroke-width: var( --xy-minimap-node-stroke-width-props, var(--xy-minimap-node-stroke-width, var(--xy-minimap-node-stroke-width-default)) ); } .react-flow__background-pattern.dots { fill: var( --xy-background-pattern-color-props, var(--xy-background-pattern-color, var(--xy-background-pattern-dots-color-default)) ); } .react-flow__background-pattern.lines { stroke: var( --xy-background-pattern-color-props, var(--xy-background-pattern-color, var(--xy-background-pattern-lines-color-default)) ); } .react-flow__background-pattern.cross { stroke: var( --xy-background-pattern-color-props, var(--xy-background-pattern-color, var(--xy-background-pattern-cross-color-default)) ); } .react-flow__controls { display: flex; flex-direction: column; box-shadow: var(--xy-controls-box-shadow, var(--xy-controls-box-shadow-default)); } .react-flow__controls.horizontal { flex-direction: row; } .react-flow__controls-button { display: flex; justify-content: center; align-items: center; height: 26px; width: 26px; padding: 4px; border: none; background: var(--xy-controls-button-background-color, var(--xy-controls-button-background-color-default)); border-bottom: 1px solid var( --xy-controls-button-border-color-props, var(--xy-controls-button-border-color, var(--xy-controls-button-border-color-default)) ); color: var( --xy-controls-button-color-props, var(--xy-controls-button-color, var(--xy-controls-button-color-default)) ); cursor: pointer; -webkit-user-select: none; -moz-user-select: none; user-select: none; } .react-flow__controls-button svg { width: 100%; max-width: 12px; max-height: 12px; fill: currentColor; } .react-flow__edge.updating .react-flow__edge-path { stroke: #777; } .react-flow__edge-text { font-size: 10px; } .react-flow__node.selectable:focus, .react-flow__node.selectable:focus-visible { outline: none; } .react-flow__node-input, .react-flow__node-default, .react-flow__node-output, .react-flow__node-group { padding: 10px; border-radius: var(--xy-node-border-radius, var(--xy-node-border-radius-default)); width: 150px; font-size: 12px; color: var(--xy-node-color, var(--xy-node-color-default)); text-align: center; border: var(--xy-node-border, var(--xy-node-border-default)); background-color: var(--xy-node-background-color, var(--xy-node-background-color-default)); } .react-flow__node-input.selectable:hover, .react-flow__node-default.selectable:hover, .react-flow__node-output.selectable:hover, .react-flow__node-group.selectable:hover { box-shadow: var(--xy-node-boxshadow-hover, var(--xy-node-boxshadow-hover-default)); } .react-flow__node-input.selectable.selected, .react-flow__node-input.selectable:focus, .react-flow__node-input.selectable:focus-visible, .react-flow__node-default.selectable.selected, .react-flow__node-default.selectable:focus, .react-flow__node-default.selectable:focus-visible, .react-flow__node-output.selectable.selected, .react-flow__node-output.selectable:focus, .react-flow__node-output.selectable:focus-visible, .react-flow__node-group.selectable.selected, .react-flow__node-group.selectable:focus, .react-flow__node-group.selectable:focus-visible { box-shadow: var(--xy-node-boxshadow-selected, var(--xy-node-boxshadow-selected-default)); } .react-flow__node-group { background-color: var(--xy-node-group-background-color, var(--xy-node-group-background-color-default)); } .react-flow__nodesselection-rect, .react-flow__selection { background: var(--xy-selection-background-color, var(--xy-selection-background-color-default)); border: var(--xy-selection-border, var(--xy-selection-border-default)); } .react-flow__nodesselection-rect:focus, .react-flow__nodesselection-rect:focus-visible, .react-flow__selection:focus, .react-flow__selection:focus-visible { outline: none; } .react-flow__controls-button:hover { background: var( --xy-controls-button-background-color-hover-props, var(--xy-controls-button-background-color-hover, var(--xy-controls-button-background-color-hover-default)) ); color: var( --xy-controls-button-color-hover-props, var(--xy-controls-button-color-hover, var(--xy-controls-button-color-hover-default)) ); } .react-flow__controls-button:disabled { pointer-events: none; } .react-flow__controls-button:disabled svg { fill-opacity: 0.4; } .react-flow__controls-button:last-child { border-bottom: none; } .react-flow__controls.horizontal .react-flow__controls-button { border-bottom: none; border-right: 1px solid var( --xy-controls-button-border-color-props, var(--xy-controls-button-border-color, var(--xy-controls-button-border-color-default)) ); } .react-flow__controls.horizontal .react-flow__controls-button:last-child { border-right: none; } .react-flow__resize-control { position: absolute; } .react-flow__resize-control.left, .react-flow__resize-control.right { cursor: ew-resize; } .react-flow__resize-control.top, .react-flow__resize-control.bottom { cursor: ns-resize; } .react-flow__resize-control.top.left, .react-flow__resize-control.bottom.right { cursor: nwse-resize; } .react-flow__resize-control.bottom.left, .react-flow__resize-control.top.right { cursor: nesw-resize; } /* handle styles */ .react-flow__resize-control.handle { width: 5px; height: 5px; border: 1px solid #fff; border-radius: 1px; background-color: var(--xy-resize-background-color, var(--xy-resize-background-color-default)); translate: -50% -50%; } .react-flow__resize-control.handle.left { left: 0; top: 50%; } .react-flow__resize-control.handle.right { left: 100%; top: 50%; } .react-flow__resize-control.handle.top { left: 50%; top: 0; } .react-flow__resize-control.handle.bottom { left: 50%; top: 100%; } .react-flow__resize-control.handle.top.left { left: 0; } .react-flow__resize-control.handle.bottom.left { left: 0; } .react-flow__resize-control.handle.top.right { left: 100%; } .react-flow__resize-control.handle.bottom.right { left: 100%; } /* line styles */ .react-flow__resize-control.line { border-color: var(--xy-resize-background-color, var(--xy-resize-background-color-default)); border-width: 0; border-style: solid; } .react-flow__resize-control.line.left, .react-flow__resize-control.line.right { width: 1px; transform: translate(-50%, 0); top: 0; height: 100%; } .react-flow__resize-control.line.left { left: 0; border-left-width: 1px; } .react-flow__resize-control.line.right { left: 100%; border-right-width: 1px; } .react-flow__resize-control.line.top, .react-flow__resize-control.line.bottom { height: 1px; transform: translate(0, -50%); left: 0; width: 100%; } .react-flow__resize-control.line.top { top: 0; border-top-width: 1px; } .react-flow__resize-control.line.bottom { border-bottom-width: 1px; top: 100%; } .react-flow__edge-textbg { fill: var(--xy-edge-label-background-color, var(--xy-edge-label-background-color-default)); } .react-flow__edge-text { fill: var(--xy-edge-label-color, var(--xy-edge-label-color-default)); } /* ================================================================ FLOWLABS / FLOW BUILDER Modern Light Dashboard UI ================================================================ */ .flowlabs-page { width: 100%; min-width: 0; padding: 20px 24px 32px; background: var(--bg); } /* ================================================================ PAGE HEADER ================================================================ */ .fl-page-header { width: 100%; min-height: 150px; display: flex; align-items: center; justify-content: space-between; gap: 24px; padding: 24px 28px; background: var(--surface); border: 1px solid var(--line); border-radius: var(--radius-xl); box-shadow: var(--sh-sm); margin-bottom: 18px; } .fl-page-header-content { min-width: 0; flex: 1; } .fl-breadcrumb { display: flex; align-items: center; gap: 7px; margin-bottom: 8px; font-size: 12px; font-weight: 600; color: var(--brand); text-transform: uppercase; letter-spacing: 0.04em; } .fl-page-title { margin: 0 0 7px; color: var(--ink); font-size: 25px; line-height: 1.25; font-weight: 700; letter-spacing: -0.025em; } .fl-page-description { margin: 0; color: var(--ink-soft); font-size: 14px; line-height: 1.6; } .fl-create-wrapper { flex-shrink: 0; display: flex; align-items: center; justify-content: flex-end; } /* ================================================================ CREATE NEW FLOW BUTTON Important: Overrides global app button styling ================================================================ */ .flowlabs-create-btn { min-height: 44px !important; display: inline-flex !important; align-items: center !important; justify-content: center !important; gap: 9px !important; padding: 0 18px !important; border: 1px solid var(--brand) !important; border-radius: 9px !important; background: var(--brand) !important; color: #ffffff !important; font-size: 13px !important; font-weight: 600 !important; line-height: 1 !important; box-shadow: 0 2px 5px rgba(8, 102, 255, 0.16), 0 5px 14px rgba(8, 102, 255, 0.1) !important; transition: background var(--transition-fast), border-color var(--transition-fast), box-shadow var(--transition-fast), transform var(--transition-fast) !important; } .flowlabs-create-btn svg { width: 17px; height: 17px; flex-shrink: 0; } .flowlabs-create-btn:hover:not(:disabled) { background: var(--brand-hover) !important; border-color: var(--brand-hover) !important; box-shadow: 0 4px 10px rgba(8, 102, 255, 0.2), 0 8px 20px rgba(8, 102, 255, 0.12) !important; transform: translateY(-1px); } .flowlabs-create-btn:active:not(:disabled) { transform: translateY(0); box-shadow: 0 2px 5px rgba(8, 102, 255, 0.16) !important; } /* ================================================================ ADMIN HEADER ================================================================ */ .fl-admin-heading { display: flex; align-items: center; gap: 9px; } .fl-admin-heading .masterHeading { margin: 0; } .fl-heading-badge { display: inline-flex; align-items: center; height: 24px; padding: 0 9px; border-radius: 999px; background: var(--brand-soft); color: var(--brand); border: 1px solid rgba(8, 102, 255, 0.12); font-size: 11px; font-weight: 600; } /* ================================================================ STATISTICS ================================================================ */ .fl-stats-grid { width: 100%; display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 14px; margin-bottom: 18px; } .fl-stat-card { min-width: 0; display: flex; align-items: center; gap: 13px; padding: 17px 18px; background: var(--surface); border: 1px solid var(--line); border-radius: var(--radius-lg); box-shadow: var(--sh-sm); transition: transform var(--transition-fast), box-shadow var(--transition-fast), border-color var(--transition-fast); } .fl-stat-card:hover { transform: translateY(-1px); border-color: var(--line-strong); box-shadow: var(--sh-md); } .fl-stat-icon { width: 40px; height: 40px; flex-shrink: 0; display: flex; align-items: center; justify-content: center; border-radius: 10px; font-size: 18px; } .fl-stat-icon.blue { background: #edf4ff; color: #0866ff; } .fl-stat-icon.green { background: #eafaf3; color: #10b981; } .fl-stat-icon.orange { background: #fff6e7; color: #f59e0b; } .fl-stat-icon.purple { background: #f2edff; color: #7c3aed; } .fl-stat-content { min-width: 0; display: flex; flex-direction: column; gap: 3px; } .fl-stat-label { color: var(--ink-soft); font-size: 12px; font-weight: 500; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; } .fl-stat-value { color: var(--ink); font-size: 21px; line-height: 1.1; font-weight: 700; } /* ================================================================ TABLE SECTION ================================================================ */ .fl-table-section { width: 100%; overflow: hidden; background: var(--surface); border: 1px solid var(--line); border-radius: var(--radius-xl); box-shadow: var(--sh-sm); } /* ================================================================ TABLE HEADER ================================================================ */ .fl-table-header { min-height: 78px; display: flex; align-items: center; justify-content: space-between; gap: 20px; padding: 17px 20px; border-bottom: 1px solid var(--line); background: var(--surface); } .fl-table-header > div:first-child { min-width: 0; } .fl-table-header h3 { margin: 0 0 4px; color: var(--ink); font-size: 15px; font-weight: 700; } .fl-table-header p { margin: 0; color: var(--ink-soft); font-size: 12px; } .fl-table-count { flex-shrink: 0; display: inline-flex; align-items: center; gap: 7px; padding: 7px 10px; border: 1px solid var(--line); border-radius: 7px; background: var(--surface-muted); color: var(--ink-soft); font-size: 12px; font-weight: 500; } .fl-table-count svg { color: var(--brand); font-size: 14px; } /* ================================================================ TABLE CONTAINER ================================================================ */ .fl-table-container { width: 100%; min-width: 0; overflow-x: auto; } /* ================================================================ FLOW NAME CELL ================================================================ */ .fl-flow-name-cell { min-width: 0; display: flex; align-items: center; gap: 10px; } .fl-flow-icon { width: 32px; height: 32px; flex-shrink: 0; display: flex; align-items: center; justify-content: center; border-radius: 8px; background: var(--brand-soft); color: var(--brand); font-size: 15px; } .fl-flow-name-content { min-width: 0; display: flex; flex-direction: column; gap: 3px; } .fl-flow-title { display: block; max-width: 100%; color: var(--ink); font-size: 13px; font-weight: 600; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; } .fl-flow-type { color: var(--ink-muted); font-size: 11px; font-weight: 400; } /* ================================================================ DESCRIPTION ================================================================ */ .fl-description { display: block; max-width: 100%; color: var(--ink-soft); font-size: 13px; line-height: 1.45; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; } /* ================================================================ STATUS ================================================================ */ .fl-status { display: inline-flex; align-items: center; gap: 7px; min-height: 28px; padding: 0 9px; border-radius: 999px; font-size: 11px; font-weight: 600; white-space: nowrap; } .fl-status-dot { width: 6px; height: 6px; flex-shrink: 0; border-radius: 50%; background: currentColor; } .fl-status.published { color: #087a4b; background: #eafaf3; } .fl-status.draft { color: #9a6700; background: #fff7df; } .fl-status.inactive { color: #68738d; background: #f1f3f7; } /* ================================================================ STATUS SELECT ================================================================ */ .fl-status-select { min-height: 30px; padding: 0 27px 0 10px; border-radius: 999px; border: 1px solid transparent; outline: none; font-family: var(--font); font-size: 11px; font-weight: 600; cursor: pointer; appearance: auto; transition: border-color var(--transition-fast), box-shadow var(--transition-fast); } .fl-status-select.published { color: #087a4b; background: #eafaf3; } .fl-status-select.draft { color: #9a6700; background: #fff7df; } .fl-status-select.inactive { color: #68738d; background: #f1f3f7; } .fl-status-select:focus { border-color: var(--brand); box-shadow: 0 0 0 3px rgba(8, 102, 255, 0.08); } /* ================================================================ ACTION CELL ================================================================ */ .fl-action-cell { display: flex; align-items: center; justify-content: flex-end; min-height: 34px; } /* ================================================================ REUSABLE TABLE OVERRIDES ================================================================ */ .fl-table-container .MuiTableContainer-root { border-radius: 0 !important; } .fl-table-container table { width: 100%; min-width: 760px; } .fl-table-container thead th { background: #f7f9fc !important; color: #68738d !important; border-bottom: 1px solid var(--line) !important; font-size: 11px !important; font-weight: 600 !important; text-transform: uppercase; letter-spacing: 0.025em; } .fl-table-container tbody td { border-bottom: 1px solid #edf0f5 !important; color: var(--ink); font-size: 13px; } .fl-table-container tbody tr { transition: background var(--transition-fast); } .fl-table-container tbody tr:hover { background: #fafcff !important; } /* ================================================================ MODAL ================================================================ */ .flowlabs-modal { max-width: 500px; } .flowlabs-modal .modal-content { overflow: hidden; border: 1px solid var(--line); border-radius: 16px; background: var(--surface); box-shadow: var(--sh-lg); } /* ================================================================ MODAL HEADER ================================================================ */ .flowlabs-modal-header { display: flex; align-items: flex-start; justify-content: space-between; gap: 20px; padding: 20px 22px; border-bottom: 1px solid var(--line); background: var(--surface); } .flowlabs-modal-title { margin: 0 0 5px; color: var(--ink); font-size: 17px; font-weight: 700; } .flowlabs-modal-subtitle { margin: 0; color: var(--ink-soft); font-size: 12px; line-height: 1.5; } .flowlabs-modal-close { width: 30px; height: 30px; flex-shrink: 0; display: flex; align-items: center; justify-content: center; padding: 0; border: 1px solid var(--line); border-radius: 7px; background: var(--surface); cursor: pointer; transition: background var(--transition-fast), border-color var(--transition-fast); } .flowlabs-modal-close:hover { background: var(--surface-muted); border-color: var(--line-strong); } .flowlabs-close-icon { width: 13px; height: 13px; opacity: 0.65; } /* ================================================================ MODAL BODY ================================================================ */ .flowlabs-modal-body { padding: 22px; } .flowlabs-field { margin-bottom: 18px; } .flowlabs-field:last-child { margin-bottom: 0; } .flowlabs-required { margin-left: 3px; color: var(--bad); font-weight: 600; } .flowlabs-field .app-label { margin-bottom: 7px; font-size: 12px; } .flowlabs-field .app-input, .flowlabs-field .app-textarea { min-height: 40px; border-color: var(--line-strong); font-size: 13px; box-shadow: none; } .flowlabs-field .app-textarea { min-height: 100px; resize: vertical; } .flowlabs-field .app-input:hover, .flowlabs-field .app-textarea:hover { border-color: #c5cedc; } .flowlabs-field .app-input:focus, .flowlabs-field .app-textarea:focus { border-color: var(--brand); box-shadow: 0 0 0 3px rgba(8, 102, 255, 0.08); } .flowlabs-input-error { border-color: var(--bad) !important; } .flowlabs-input-error:focus { border-color: var(--bad) !important; box-shadow: 0 0 0 3px rgba(255, 49, 57, 0.08) !important; } .flowlabs-error { margin-top: 5px; color: var(--bad); font-size: 11px; line-height: 1.4; } /* ================================================================ MODAL FOOTER ================================================================ */ .flowlabs-modal-footer { display: flex; align-items: center; justify-content: flex-end; gap: 9px; padding: 14px 22px; border-top: 1px solid var(--line); background: #fafbfc; } .flowlabs-modal-footer .app-btn { min-height: 38px; font-size: 12px; } /* ================================================================ LOADING ================================================================ */ .flowlabs-page .animation-loader, .flowlabs-page [class*="loader"] { z-index: 20; } /* ================================================================ RESPONSIVE - TABLET ================================================================ */ @media (max-width: 1100px) { .flowlabs-page { padding: 18px; } .fl-stats-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); } .fl-page-header { padding: 20px 22px; } } /* ================================================================ RESPONSIVE - MOBILE ================================================================ */ @media (max-width: 768px) { .flowlabs-page { padding: 14px 12px 24px; } .fl-page-header { min-height: auto; flex-direction: column; align-items: stretch; padding: 18px; gap: 17px; } .fl-page-title { font-size: 21px; } .fl-page-description { font-size: 12px; } .fl-create-wrapper { width: 100%; } .flowlabs-create-btn { width: 100% !important; } .fl-stats-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 10px; margin-bottom: 14px; } .fl-stat-card { padding: 13px; gap: 10px; } .fl-stat-icon { width: 34px; height: 34px; font-size: 15px; } .fl-stat-value { font-size: 18px; } .fl-stat-label { font-size: 11px; } .fl-table-header { align-items: flex-start; flex-direction: column; padding: 15px; } .fl-table-count { align-self: flex-start; } .fl-table-container { overflow-x: auto; -webkit-overflow-scrolling: touch; } .flowlabs-modal { margin: 10px; } .flowlabs-modal-header { padding: 17px; } .flowlabs-modal-body { padding: 18px; } .flowlabs-modal-footer { padding: 13px 17px; } } /* ================================================================ SMALL MOBILE ================================================================ */ @media (max-width: 480px) { .flowlabs-page { padding: 10px; } .fl-page-header { padding: 16px; } .fl-page-title { font-size: 19px; } .fl-breadcrumb { font-size: 10px; } .fl-stats-grid { grid-template-columns: 1fr; } .fl-stat-card { min-height: 64px; } .fl-table-header h3 { font-size: 14px; } .fl-table-header p { font-size: 11px; } .flowlabs-modal-footer { display: grid; grid-template-columns: 1fr 1fr; } .flowlabs-modal-footer .app-btn { width: 100%; } } /* ========================================================= FLOW NODE PALETTE ========================================================= */ .flow-node-palette { position: absolute; top: 0; left: 0; width: 400px; height: 100%; background: #ffffff; border-right: 1px solid #e7e7ef; z-index: 20; display: flex; flex-direction: column; box-shadow: 8px 0 25px rgba(20, 20, 40, 0.08); } /* HEADER */ .flow-palette-header { height: 70px; padding: 14px 14px 14px 18px; display: flex; align-items: center; gap: 10px; border-bottom: 1px solid #eeeeef; } .flow-palette-search { flex: 1; height: 42px; border: 1px solid #e4e4e9; border-radius: 9px; display: flex; align-items: center; padding: 0 12px; gap: 9px; color: #7c8496; } .flow-palette-search input { border: none; outline: none; width: 100%; font-size: 14px; color: #222; background: transparent; } .flow-palette-search input::placeholder { color: #9298a8; } .flow-palette-close { width: 40px; height: 40px; border: 1px solid #e5e5e9; background: #fff; border-radius: 9px; display: flex; align-items: center; justify-content: center; cursor: pointer; } .flow-palette-close:hover { background: #f7f7fa; } /* BODY */ .flow-palette-body { flex: 1; overflow-y: auto; padding: 18px; } .flow-palette-section { margin-bottom: 24px; } .flow-palette-section-title { display: flex; align-items: center; justify-content: space-between; font-size: 14px; font-weight: 600; color: #222; margin-bottom: 13px; } /* COMPONENT GRID */ .flow-palette-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 10px; } .flow-palette-card { min-height: 105px; border: 1px dashed #8b9cff; border-radius: 8px; background: #fff; display: flex; flex-direction: column; align-items: center; justify-content: center; cursor: grab; user-select: none; transition: all 0.15s ease; } .flow-palette-card:hover { background: #f8f9ff; border-color: #5d72ff; transform: translateY(-1px); } .flow-palette-card:active { cursor: grabbing; } .flow-palette-icon { width: 38px; height: 38px; display: flex; align-items: center; justify-content: center; font-size: 25px; color: #5870f5; margin-bottom: 8px; } .flow-palette-label { text-align: center; font-size: 12px; line-height: 14px; color: #1f2937; padding: 0 5px; } /* VARIABLES */ .variables-section { padding-top: 8px; border-top: 1px solid #eeeeef; } .flow-variable-list { display: flex; flex-direction: column; gap: 8px; } .flow-variable-item { min-height: 55px; border: 1px solid #e8e8ed; border-radius: 9px; background: #fafafa; display: flex; align-items: center; padding: 9px 11px; cursor: grab; transition: all 0.15s ease; } .flow-variable-item:hover { background: #f5f6ff; border-color: #9aa7ff; } .flow-variable-item:active { cursor: grabbing; } .flow-variable-icon { width: 32px; height: 32px; border-radius: 7px; background: #eef1ff; color: #5b6ff5; display: flex; align-items: center; justify-content: center; font-size: 12px; font-weight: 700; margin-right: 10px; } .flow-variable-content { min-width: 0; } .flow-variable-name { font-size: 13px; font-weight: 600; color: #242424; } .flow-variable-type { font-size: 11px; color: #9297a5; margin-top: 2px; } .flow-empty-variables { padding: 18px; border: 1px dashed #ddd; border-radius: 8px; text-align: center; color: #999; font-size: 12px; } /* ================================ FLOW NODE MODALS ================================ */ .flow-node-modal-wrapper .modal-dialog { width: calc(100% - 32px); max-width: 760px; margin: 1.75rem auto; } .flow-node-modal-wrapper .modal-content { border: none !important; border-radius: 14px !important; overflow: hidden; background: #ffffff; box-shadow: 0 20px 60px rgba(0, 0, 0, 0.18); } /* Main container */ .flow-node-modal { display: flex; flex-direction: column; max-height: 85vh; background: #ffffff; } /* Header */ .flow-node-modal-header { min-height: 58px; padding: 14px 18px; display: flex; align-items: center; justify-content: space-between; border-bottom: 1px solid #e8e8e8; } .flow-node-modal-title { display: flex; align-items: center; gap: 10px; color: #17213c; font-size: 16px; font-weight: 600; } .flow-node-modal-close { width: 34px; height: 34px; display: flex; align-items: center; justify-content: center; padding: 0; border: 1px solid #dfe3eb; border-radius: 8px; background: #ffffff; color: #596273; font-size: 22px; line-height: 1; cursor: pointer; } .flow-node-modal-close:hover { background: #f5f6f8; color: #1d2433; } /* Body */ .flow-node-modal-body { padding: 22px; overflow-y: auto; min-height: 0; } /* Scrollbar */ .flow-node-modal-body::-webkit-scrollbar { width: 6px; } .flow-node-modal-body::-webkit-scrollbar-track { background: transparent; } .flow-node-modal-body::-webkit-scrollbar-thumb { background: #d4d8e0; border-radius: 10px; } /* Footer */ .flow-node-modal-footer { min-height: 62px; display: flex; align-items: center; justify-content: space-between; padding: 12px 18px; border-top: 1px solid #e8e8e8; background: #ffffff; } /* Buttons */ .flow-node-modal-cancel, .flow-node-modal-save { height: 36px; min-width: 80px; padding: 0 16px; border-radius: 7px; font-size: 13px; font-weight: 500; cursor: pointer; } /* Close */ .flow-node-modal-cancel { border: 1px solid #d9dde5; background: #ffffff; color: #4b5563; } .flow-node-modal-cancel:hover { background: #f5f6f8; } /* Save */ .flow-node-modal-save { border: 1px solid #526dff; background: #526dff; color: #ffffff; } .flow-node-modal-save:hover { background: #4059e8; } /* ========================================================= FLOWLAB EDITOR ========================================================= */ .flow-page { width: 100%; height: 100%; padding: 12px 16px 16px; background: #f5f7fb; box-sizing: border-box; } .flow-editor-shell { width: 100%; height: 90vh; min-height: 700px; overflow: hidden; background: #ffffff; border: 1px solid #e4e8ef; border-radius: 18px; box-shadow: 0 8px 30px rgba(15, 23, 42, 0.06), 0 2px 8px rgba(15, 23, 42, 0.03); display: flex; flex-direction: column; } /* ========================================================= HEADER ========================================================= */ .flow-canvas-header { min-height: 70px; padding: 0 18px; display: flex; align-items: center; justify-content: space-between; background: rgba(255, 255, 255, 0.96); border-bottom: 1px solid #edf0f4; position: relative; z-index: 20; } .flow-header-left { display: flex; align-items: center; gap: 12px; min-width: 0; } .flow-header-icon { width: 40px; height: 40px; border-radius: 11px; display: flex; align-items: center; justify-content: center; background: #eef2ff; color: #4f46e5; font-size: 24px; font-weight: 700; flex-shrink: 0; } .flow-header-info { min-width: 0; } .flow-header-info h4 { margin: 0; font-size: 15px; font-weight: 700; color: #172033; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; } .flow-header-info span { display: block; margin-top: 3px; font-size: 12px; color: #8a93a3; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; } .flow-header-right { display: flex; align-items: center; gap: 10px; } /* ========================================================= STATUS ========================================================= */ .flow-status { height: 34px; padding: 0 11px; display: flex; align-items: center; gap: 7px; border-radius: 20px; font-size: 12px; font-weight: 600; white-space: nowrap; } .flow-status.published { background: #ecfdf3; color: #15803d; } .flow-status.draft { background: #fff7ed; color: #c2410c; } .status-dot { width: 7px; height: 7px; border-radius: 50%; background: currentColor; } /* ========================================================= VIEW MODE ========================================================= */ .flow-view-badge { height: 34px; padding: 0 11px; display: flex; align-items: center; gap: 7px; border: 1px solid #e5e7eb; border-radius: 9px; background: #f8fafc; color: #64748b; font-size: 12px; font-weight: 600; } /* ========================================================= HEADER BUTTON ========================================================= */ .flow-header-btn { height: 36px; padding: 0 15px; border-radius: 9px; border: 1px solid #e2e8f0; background: #ffffff; color: #475569; font-size: 13px; font-weight: 600; display: flex; align-items: center; gap: 7px; transition: all 0.2s ease; } .flow-header-btn:hover { border-color: #cbd5e1; background: #f8fafc; } .flow-header-btn.primary { border-color: #4f46e5; background: #4f46e5; color: #ffffff; } .flow-header-btn.primary:hover { background: #4338ca; border-color: #4338ca; } .flow-header-btn:disabled { opacity: 0.6; cursor: not-allowed; } /* ========================================================= PUBLISH SWITCH ========================================================= */ .flow-publish-control { display: flex; align-items: center; gap: 8px; padding-left: 5px; font-size: 12px; font-weight: 600; color: #64748b; } .flow-switch { position: relative; width: 38px; height: 21px; display: inline-block; } .flow-switch input { opacity: 0; width: 0; height: 0; } .flow-slider { position: absolute; inset: 0; cursor: pointer; border-radius: 20px; background: #cbd5e1; transition: 0.2s; } .flow-slider::before { content: ""; position: absolute; width: 15px; height: 15px; left: 3px; top: 3px; border-radius: 50%; background: #ffffff; transition: 0.2s; box-shadow: 0 1px 3px rgba(0, 0, 0, 0.2); } .flow-switch input:checked + .flow-slider { background: #22c55e; } .flow-switch input:checked + .flow-slider::before { transform: translateX(17px); } /* ========================================================= CANVAS ========================================================= */ .flow-canvas-wrapper { flex: 1; min-height: 0; position: relative; overflow: hidden; background-color: #fafbfc; background-image: linear-gradient(rgba(226, 232, 240, 0.35) 1px, transparent 1px), linear-gradient(90deg, rgba(226, 232, 240, 0.35) 1px, transparent 1px); background-size: 28px 28px; } /* ========================================================= REACT FLOW ========================================================= */ .flow-canvas-wrapper .react-flow { width: 100%; height: 100%; background: transparent; } .flow-canvas-wrapper .react-flow__renderer { background: transparent; } .flow-canvas-wrapper .react-flow__pane { cursor: grab; } .flow-canvas-wrapper .react-flow__pane:active { cursor: grabbing; } /* ========================================================= EDGES ========================================================= */ .flow-canvas-wrapper .react-flow__edge-path { stroke: #94a3b8; stroke-width: 2; } .flow-canvas-wrapper .react-flow__edge.selected .react-flow__edge-path { stroke: #4f46e5; stroke-width: 2.5; } /* ========================================================= HANDLES ========================================================= */ .flow-canvas-wrapper .react-flow__handle { width: 9px; height: 9px; border: 2px solid #ffffff; background: #64748b; box-shadow: 0 1px 4px rgba(15, 23, 42, 0.2); } .flow-canvas-wrapper .react-flow__handle:hover { background: #4f46e5; } /* ========================================================= FLOATING TOOLBAR ========================================================= */ .flow-floating-toolbar { position: absolute; right: 22px; top: 22px; z-index: 30; width: 46px; padding: 5px; display: flex; flex-direction: column; align-items: center; gap: 4px; border: 1px solid #e2e8f0; border-radius: 13px; background: rgba(255, 255, 255, 0.94); backdrop-filter: blur(10px); box-shadow: 0 8px 24px rgba(15, 23, 42, 0.1); } .flow-tool-btn { width: 36px; height: 36px; padding: 0; border: none; border-radius: 9px; background: transparent; color: #475569; display: flex; align-items: center; justify-content: center; cursor: pointer; transition: all 0.18s ease; } .flow-tool-btn:hover { background: #f1f5f9; color: #334155; } .flow-tool-btn.add { background: #4f46e5; color: #ffffff; } .flow-tool-btn.add:hover { background: #4338ca; color: #ffffff; } .flow-tool-btn:disabled { opacity: 0.45; cursor: not-allowed; } .flow-toolbar-divider { width: 26px; height: 1px; margin: 2px 0; background: #e2e8f0; } /* ========================================================= REACT FLOW CONTROLS ========================================================= */ .flow-controls { margin: 0 0 20px 20px !important; border: 1px solid #e2e8f0 !important; border-radius: 12px !important; overflow: hidden; box-shadow: 0 6px 18px rgba(15, 23, 42, 0.08); background: rgba(255, 255, 255, 0.95); } .flow-controls button { width: 34px !important; height: 34px !important; border: none !important; border-bottom: 1px solid #edf0f4 !important; background: #ffffff !important; color: #475569 !important; transition: 0.15s ease; } .flow-controls button:hover { background: #f8fafc !important; color: #4f46e5 !important; } .flow-controls button:last-child { border-bottom: none !important; } /* ========================================================= MINIMAP ========================================================= */ .flow-minimap { margin: 0 20px 20px 0 !important; width: 180px !important; height: 115px !important; border: 1px solid #e2e8f0 !important; border-radius: 13px !important; overflow: hidden; background: rgba(255, 255, 255, 0.94) !important; box-shadow: 0 8px 24px rgba(15, 23, 42, 0.08); } .flow-minimap .react-flow__minimap-mask { fill: rgba(79, 70, 229, 0.08); } /* ========================================================= MODE INDICATOR ========================================================= */ .flow-mode-indicator { position: absolute; left: 20px; bottom: 20px; z-index: 25; height: 34px; padding: 0 11px; display: flex; align-items: center; gap: 7px; border: 1px solid #e2e8f0; border-radius: 18px; background: rgba(255, 255, 255, 0.94); backdrop-filter: blur(8px); box-shadow: 0 5px 18px rgba(15, 23, 42, 0.07); font-size: 11px; font-weight: 600; color: #64748b; } .mode-dot { width: 7px; height: 7px; border-radius: 50%; } .mode-dot.edit { background: #4f46e5; } .mode-dot.view { background: #64748b; } /* ========================================================= SELECTION ========================================================= */ .flow-canvas-wrapper .react-flow__node.selected { filter: drop-shadow(0 0 0.35rem rgba(79, 70, 229, 0.35)); } /* ========================================================= DARK MODE ========================================================= */ .flow-page.dark { background: #0f172a; } .flow-page.dark .flow-editor-shell { background: #111827; border-color: #1f2937; } .flow-page.dark .flow-canvas-header { background: #111827; border-color: #1f2937; } .flow-page.dark .flow-header-info h4 { color: #f8fafc; } .flow-page.dark .flow-header-info span { color: #94a3b8; } .flow-page.dark .flow-header-icon { background: #1e1b4b; color: #a5b4fc; } .flow-page.dark .flow-canvas-wrapper { background-color: #0f172a; background-image: linear-gradient(rgba(51, 65, 85, 0.18) 1px, transparent 1px), linear-gradient(90deg, rgba(51, 65, 85, 0.18) 1px, transparent 1px); } .flow-page.dark .flow-floating-toolbar, .flow-page.dark .flow-controls, .flow-page.dark .flow-minimap, .flow-page.dark .flow-mode-indicator { background: rgba(17, 24, 39, 0.94) !important; border-color: #334155 !important; } .flow-page.dark .flow-tool-btn { color: #cbd5e1; } .flow-page.dark .flow-tool-btn:hover { background: #1e293b; } .flow-page.dark .flow-controls button { background: #111827 !important; color: #cbd5e1 !important; border-color: #1f2937 !important; } .flow-page.dark .flow-toolbar-divider { background: #334155; } .flow-page.dark .flow-view-badge { background: #1e293b; border-color: #334155; color: #94a3b8; } .flow-page.dark .flow-header-btn:not(.primary) { background: #1e293b; border-color: #334155; color: #cbd5e1; } .flow-page.dark .flow-mode-indicator { color: #94a3b8; } /* ========================================================= RESPONSIVE ========================================================= */ @media (max-width: 1100px) { .flow-canvas-header { padding: 0 12px; } .flow-header-info { max-width: 220px; } .flow-publish-control span { display: none; } .flow-view-badge { display: none; } } @media (max-width: 768px) { .flow-page { padding: 8px; } .flow-editor-shell { height: calc(100vh - 100px); min-height: 500px; border-radius: 12px; } .flow-canvas-header { min-height: 60px; } .flow-header-info span { display: none; } .flow-status { display: none; } .flow-header-btn { padding: 0 10px; font-size: 12px; } .flow-minimap { display: none; } .flow-floating-toolbar { right: 12px; top: 12px; } .flow-mode-indicator { left: 12px; bottom: 12px; } } /* ========================================= FULLSCREEN FLOW EDITOR ========================================= */ .flow-editor-shell:fullscreen { width: 100vw; height: 100vh; margin: 0; padding: 0; border-radius: 0; background: #ffffff; } .flow-editor-shell:-webkit-full-screen { width: 100vw; height: 100vh; margin: 0; padding: 0; border-radius: 0; background: #ffffff; } .flow-editor-fullscreen { width: 100vw !important; height: 100vh !important; max-width: none !important; max-height: none !important; border-radius: 0 !important; } /* Header remains inside fullscreen editor */ .flow-editor-fullscreen .flow-canvas-header { width: 100%; } /* Canvas gets all remaining screen height */ .flow-editor-fullscreen .flow-canvas-wrapper { height: calc(100vh - 78px) !important; min-height: 0 !important; } /* ReactFlow must fill canvas */ .flow-editor-fullscreen .react-flow { width: 100%; height: 100%; } /* Keep toolbar visible */ .flow-editor-fullscreen .flow-floating-toolbar { z-index: 100; } /* Keep mode indicator visible */ .flow-editor-fullscreen .flow-mode-indicator { z-index: 100; } /* Keep minimap above everything */ .flow-editor-fullscreen .flow-minimap { z-index: 20; } /* ========================================================= EMAIL ACTION MODAL Prevent body/footer overlap ========================================================= */ .email-action-modal .modal-dialog { width: 100%; max-width: 650px; margin: 1.75rem auto; } .email-action-modal .modal-content { display: flex; flex-direction: column; max-height: calc(100vh - 40px); border: none !important; border-radius: 8px !important; overflow: hidden; box-shadow: 0 8px 30px rgba(0, 0, 0, 0.18); } /* Header */ .email-action-modal .modalHeader { flex: 0 0 auto; min-height: 54px; padding: 0 16px; display: flex; align-items: center; justify-content: space-between; border-bottom: 1px solid #e5e7eb; background: #ffffff; } /* BODY */ .email-action-modal .modal-body { flex: 1 1 auto; min-height: 0; padding: 16px !important; background: #ffffff; overflow-y: auto; overflow-x: hidden; } /* FOOTER */ .email-action-modal .modal-footer { flex: 0 0 auto; min-height: 58px; padding: 10px 16px !important; border-top: 1px solid #e5e7eb; background: #ffffff; } /* Scrollbar */ .email-action-modal .modal-body::-webkit-scrollbar { width: 6px; } .email-action-modal .modal-body::-webkit-scrollbar-track { background: transparent; } .email-action-modal .modal-body::-webkit-scrollbar-thumb { background: #d1d5db; border-radius: 10px; } .email-action-modal .modal-body::-webkit-scrollbar-thumb:hover { background: #9ca3af; } /* ========================================================= FLOW NODE SYSTEM ========================================================= */ .react-flow__node { font-family: Inter, system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif; } /* Remove default ReactFlow selection outline */ .react-flow__node.selected { outline: none; } /* ========================================================= COMMON NODE CARD ========================================================= */ .flow-node-card { position: relative; min-width: 230px; max-width: 300px; border-radius: 14px; background: #ffffff; border: 1px solid #e6eaf2; box-shadow: 0 8px 24px rgba(30, 41, 59, 0.08), 0 2px 6px rgba(30, 41, 59, 0.04); transition: box-shadow 0.18s ease, transform 0.18s ease, border-color 0.18s ease; } .flow-node-card:hover { box-shadow: 0 12px 30px rgba(30, 41, 59, 0.12), 0 4px 10px rgba(30, 41, 59, 0.06); } .flow-node-inner { display: flex; align-items: flex-start; gap: 12px; padding: 15px 16px; } .flow-node-icon { flex: 0 0 auto; width: 38px; height: 38px; border-radius: 11px; display: flex; align-items: center; justify-content: center; } .flow-node-content { min-width: 0; } .flow-node-title { font-size: 13px; line-height: 18px; font-weight: 700; color: #16213a; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; } .flow-node-subtitle { margin-top: 3px; font-size: 11px; line-height: 16px; color: #73809a; } .flow-node-description { margin-top: 5px; font-size: 10px; color: #8a94a8; } /* ========================================================= HANDLES ========================================================= */ .flow-node-handle { width: 8px !important; height: 8px !important; border: 2px solid #ffffff !important; background: #9aa6ba !important; box-shadow: 0 0 0 1px #d8deea; z-index: 20; } .flow-node-source { bottom: -5px !important; } .flow-node-target { top: -5px !important; } /* ========================================================= EMAIL NODE ========================================================= */ .flow-node-email { border-color: #ccebe6; background: #f3fffd; } .flow-node-email .flow-node-icon { background: #d9f7f1; color: #16a085; } /* ========================================================= WAIT NODE ========================================================= */ .flow-node-wait { border-color: #f4dfad; background: #fffaf0; } .flow-node-wait .flow-node-icon { background: #fff1c9; color: #e9a400; } /* ========================================================= TAG NODE ========================================================= */ .flow-node-tag { border-color: #dbe5ff; background: #f6f8ff; } .flow-node-tag .flow-node-icon { background: #e9efff; color: #4f6fff; } /* ========================================================= ASSIGN NODE ========================================================= */ .flow-node-assign { border-color: #d7e6ff; background: #f4f8ff; } .flow-node-assign .flow-node-icon { background: #e4efff; color: #3679e8; } /* ========================================================= END NODE ========================================================= */ .flow-node-end { min-width: 180px; border-color: #ccebd9; background: #effbf4; } .flow-node-end .flow-node-icon { background: #d9f5e3; color: #22a45a; } /* ========================================================= SUCCESS ========================================================= */ .flow-node-success { border-color: #ccebd9; background: #effbf4; } .flow-node-success .flow-node-icon { background: #d9f5e3; color: #22a45a; } /* ========================================================= FAILED ========================================================= */ .flow-node-failed { border-color: #f5d3d3; background: #fff6f6; } .flow-node-failed .flow-node-icon { background: #ffe2e2; color: #e54c4c; } /* ========================================================= SCHEDULED ========================================================= */ .flow-node-scheduled { min-width: 300px; border-color: #d9e2ff; background: #ffffff; } .flow-node-scheduled .flow-node-icon { background: #eef1ff; color: #536dfe; } .flow-node-meta { margin-top: 12px; display: grid; gap: 7px; } .flow-node-meta > div { display: flex; align-items: center; justify-content: space-between; gap: 15px; } .flow-node-meta span { font-size: 10px; color: #8993a6; } .flow-node-meta strong { font-size: 10px; color: #39445b; text-align: right; } .flow-node-status { margin-top: 10px; display: flex; align-items: center; gap: 6px; font-size: 10px; font-weight: 600; } .flow-node-status-dot { width: 6px; height: 6px; border-radius: 50%; background: #f59e0b; } .flow-node-status.configured { color: #159447; } .flow-node-status.configured .flow-node-status-dot { background: #22c55e; } .flow-node-status.not-configured { color: #9a6a00; } /* ========================================================= EMAIL ACTION ========================================================= */ .flow-email-node { position: relative; min-width: 680px; } .flow-email-card { width: 260px; margin: 0 auto; display: flex; align-items: center; gap: 12px; padding: 14px 17px; border-radius: 13px; background: #ecfaf7; border: 1px solid #c7ebe4; box-shadow: 0 7px 22px rgba(30, 41, 59, 0.08); } .flow-email-icon { width: 38px; height: 38px; border-radius: 10px; display: flex; align-items: center; justify-content: center; background: #d7f5ef; color: #14a085; } .flow-email-title { font-size: 13px; font-weight: 700; color: #15213a; } .flow-email-subtitle { margin-top: 3px; font-size: 11px; color: #6f7d95; } /* ========================================================= EMAIL BRANCHES ========================================================= */ .flow-email-branches { display: flex; justify-content: center; gap: 18px; margin-top: 28px; } .flow-email-branch { position: relative; width: 95px; text-align: center; } .flow-email-branch-label { padding: 8px 12px; border-radius: 12px; background: #ffffff; border: 1px solid #e2e7f0; box-shadow: 0 4px 12px rgba(30, 41, 59, 0.06); font-size: 11px; font-weight: 600; color: #4c5870; } .flow-email-branch:first-child .flow-email-branch-label { border-color: #e1e5ed; } .flow-email-branch:nth-child(2) .flow-email-branch-label { border-color: #7660ff; color: #5a45e8; box-shadow: 0 0 0 1px rgba(118, 96, 255, 0.08); } .flow-branch-handle { bottom: -5px !important; } .flow-branch-plus { position: absolute; left: 50%; bottom: -46px; transform: translateX(-50%); width: 30px; height: 30px; border-radius: 50%; border: 0; background: #6445e8; color: #ffffff; display: flex; align-items: center; justify-content: center; cursor: pointer; box-shadow: 0 6px 15px rgba(100, 69, 232, 0.25); z-index: 10; } .flow-branch-plus:hover { transform: translateX(-50%) scale(1.08); } /* ========================================================= REACT FLOW EDGES ========================================================= */ .react-flow__edge-path { stroke: #aeb9cc; stroke-width: 1.5; fill: none; } .react-flow__edge.selected .react-flow__edge-path { stroke: #6751e8; stroke-width: 2; } .react-flow__connection-path { stroke: #6751e8; stroke-width: 2; } /* ========================================================= FLOW CANVAS ========================================================= */ .flow-canvas-wrapper { position: relative; flex: 1; min-height: 0; background: radial-gradient( circle at 1px 1px, rgba(110, 120, 145, 0.18) 1px, transparent 1px ); background-size: 18px 18px; } .flow-canvas-wrapper .react-flow { background: transparent; } /* ========================================================= PALETTE ========================================================= */ .flow-node-palette { position: absolute; top: 0; left: 0; bottom: 0; width: 445px; background: rgba(255, 255, 255, 0.97); border-right: 1px solid #e6eaf1; box-shadow: 8px 0 25px rgba(20, 30, 50, 0.05); z-index: 50; display: flex; flex-direction: column; } .flow-palette-header { height: 76px; padding: 15px 16px; display: flex; gap: 10px; align-items: center; border-bottom: 1px solid #edf0f5; } .flow-palette-search { flex: 1; height: 46px; display: flex; align-items: center; gap: 10px; padding: 0 14px; border: 1px solid #e1e6ef; border-radius: 10px; background: #ffffff; color: #7f8aa0; } .flow-palette-search input { width: 100%; border: 0; outline: 0; font-size: 13px; color: #24314a; background: transparent; } .flow-palette-search input::placeholder { color: #9aa5b8; } .flow-palette-close { width: 46px; height: 46px; border-radius: 10px; border: 1px solid #e1e6ef; background: #ffffff; display: flex; align-items: center; justify-content: center; cursor: pointer; color: #26334b; } .flow-palette-body { flex: 1; overflow-y: auto; padding: 22px 20px; } .flow-palette-section-title { display: flex; align-items: center; justify-content: space-between; margin-bottom: 16px; color: #18243c; font-size: 13px; font-weight: 700; } .flow-palette-grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 12px; } .flow-palette-card { min-height: 125px; padding: 17px; border-radius: 12px; border: 1px dashed #b8c4ff; background: #ffffff; cursor: grab; transition: transform 0.15s ease, box-shadow 0.15s ease, background 0.15s ease; } .flow-palette-card:hover { transform: translateY(-2px); background: #fafbff; box-shadow: 0 7px 18px rgba(40, 50, 80, 0.08); } .flow-palette-card:active { cursor: grabbing; } .flow-palette-icon { width: 36px; height: 36px; margin-bottom: 12px; border-radius: 9px; display: flex; align-items: center; justify-content: center; background: #f0f2ff; color: #5667ff; font-size: 20px; } .flow-palette-label { font-size: 12px; font-weight: 600; color: #27344d; } .flow-palette-description { margin-top: 5px; font-size: 10px; line-height: 14px; color: #8a95a8; } /* ========================================================= VARIABLES ========================================================= */ .variables-section { margin-top: 24px; padding-top: 20px; border-top: 1px solid #edf0f5; } .flow-variable-list { display: flex; flex-direction: column; gap: 9px; } .flow-variable-item { display: flex; align-items: center; gap: 11px; padding: 11px; border: 1px solid #e5e9f1; border-radius: 10px; background: #ffffff; cursor: grab; } .flow-variable-item:hover { background: #fafbff; } .flow-variable-icon { width: 35px; height: 35px; display: flex; align-items: center; justify-content: center; border-radius: 9px; background: #eef1ff; color: #5867ee; font-size: 12px; font-weight: 700; } .flow-variable-name { font-size: 12px; font-weight: 600; color: #25324a; } .flow-variable-type { margin-top: 2px; font-size: 10px; color: #929caf; } .flow-empty-variables { padding: 18px; text-align: center; color: #9099aa; font-size: 12px; } /* ========================================================= DARK MODE ========================================================= */ .flow-page.dark .flow-node-card, .flow-page.dark .flow-email-card, .flow-page.dark .flow-email-branch-label { background: #171b24; border-color: #2c3442; } .flow-page.dark .flow-node-title, .flow-page.dark .flow-email-title { color: #f4f6fa; } .flow-page.dark .flow-node-subtitle, .flow-page.dark .flow-email-subtitle, .flow-page.dark .flow-node-description { color: #9ba6b8; } .flow-page.dark .flow-node-palette { background: #11151d; border-color: #28303c; } .flow-page.dark .flow-palette-search, .flow-page.dark .flow-palette-close, .flow-page.dark .flow-palette-card, .flow-page.dark .flow-variable-item { background: #171b24; border-color: #303846; } .flow-page.dark .flow-palette-label, .flow-page.dark .flow-palette-section-title, .flow-page.dark .flow-variable-name { color: #eef1f7; } /* ============================================================ FLOW PAGE ============================================================ */ .flow-page { width: 100%; height: 100%; min-height: 100vh; background: #f5f7fb; color: #17213a; } .flow-page.dark { background: #111827; color: #f8fafc; } .flow-editor-shell { width: 100%; height: 100vh; min-height: 720px; position: relative; background: #ffffff; overflow: hidden; } .flow-editor-fullscreen { height: 100vh; width: 100vw; } /* ============================================================ HEADER ============================================================ */ .flow-canvas-header { height: 86px; width: 100%; display: flex; align-items: center; justify-content: space-between; padding: 0 24px; border-bottom: 1px solid #e7eaf1; background: #ffffff; position: relative; z-index: 50; } .flow-header-left { display: flex; align-items: center; gap: 14px; } .flow-header-icon { width: 44px; height: 44px; border-radius: 14px; background: #eef2ff; display: flex; align-items: center; justify-content: center; color: #4f46e5; font-size: 24px; } .flow-header-info h4 { margin: 0; font-size: 17px; font-weight: 700; color: #111827; } .flow-header-info span { display: block; margin-top: 4px; color: #8a94a8; font-size: 13px; } .flow-header-right { display: flex; align-items: center; gap: 12px; } .flow-status { height: 38px; padding: 0 15px; border-radius: 20px; display: flex; align-items: center; gap: 8px; font-size: 13px; font-weight: 600; } .flow-status.published { background: #ecfdf3; color: #16824b; } .flow-status.draft { background: #fff7ed; color: #c2410c; } .status-dot { width: 8px; height: 8px; border-radius: 50%; background: #16a34a; } .flow-status.draft .status-dot { background: #f97316; } .flow-view-badge { height: 38px; display: flex; align-items: center; padding: 0 13px; border-radius: 20px; background: #f1f5f9; color: #64748b; font-size: 13px; font-weight: 600; gap: 7px; } .flow-header-btn { height: 40px; padding: 0 17px; border: 0; border-radius: 10px; display: inline-flex; align-items: center; justify-content: center; gap: 8px; font-size: 13px; font-weight: 600; cursor: pointer; } .flow-header-btn.primary { background: #5146e5; color: #ffffff; } .flow-header-btn.primary:hover { background: #4338ca; } .flow-header-btn:disabled { opacity: 0.65; cursor: not-allowed; } .flow-publish-control { display: flex; align-items: center; gap: 10px; color: #64748b; font-size: 13px; } /* ============================================================ SWITCH ============================================================ */ .flow-switch { position: relative; width: 44px; height: 24px; display: inline-block; } .flow-switch input { opacity: 0; width: 0; height: 0; } .flow-slider { position: absolute; inset: 0; border-radius: 30px; background: #cbd5e1; cursor: pointer; transition: 0.2s; } .flow-slider::before { content: ""; position: absolute; width: 18px; height: 18px; left: 3px; top: 3px; border-radius: 50%; background: #ffffff; transition: 0.2s; box-shadow: 0 1px 3px rgba(0, 0, 0, 0.15); } .flow-switch input:checked + .flow-slider { background: #22c55e; } .flow-switch input:checked + .flow-slider::before { transform: translateX(20px); } /* ============================================================ CANVAS ============================================================ */ .flow-canvas-wrapper { position: relative; height: calc(100vh - 86px); width: 100%; overflow: hidden; background: #fbfcff; } .flow-canvas-wrapper .react-flow { width: 100%; height: 100%; } .react-flow__pane { cursor: default; } .react-flow__node { cursor: pointer; } .react-flow__edge-path { stroke: #a8b5ca; stroke-width: 1.6; } .react-flow__edge.selected .react-flow__edge-path { stroke: #6366f1; } /* ============================================================ PALETTE ============================================================ */ .flow-node-palette { position: absolute; left: 0; top: 0; bottom: 0; width: 430px; background: #ffffff; border-right: 1px solid #e5e7eb; z-index: 40; box-shadow: 8px 0 25px rgba(15, 23, 42, 0.05); overflow: hidden; } .flow-palette-header { height: 76px; padding: 12px 14px; display: flex; align-items: center; gap: 10px; border-bottom: 1px solid #edf0f5; } .flow-palette-search { height: 46px; flex: 1; border: 1px solid #dfe4ed; border-radius: 10px; display: flex; align-items: center; gap: 10px; padding: 0 13px; color: #8a94a8; } .flow-palette-search input { width: 100%; border: 0; outline: none; font-size: 14px; color: #1e293b; } .flow-palette-search input::placeholder { color: #9aa4b7; } .flow-palette-close { width: 46px; height: 46px; flex: 0 0 46px; border: 1px solid #dfe4ed; background: #ffffff; border-radius: 10px; display: flex; align-items: center; justify-content: center; cursor: pointer; color: #111827; } .flow-palette-body { height: calc(100% - 76px); overflow-y: auto; padding: 22px 18px; } .flow-palette-section-title { display: flex; align-items: center; justify-content: space-between; margin-bottom: 16px; color: #111827; font-size: 14px; font-weight: 700; } .flow-palette-grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 12px; } .flow-palette-card { min-height: 154px; border: 1px dashed #8da1ff; border-radius: 11px; background: #ffffff; display: flex; flex-direction: column; align-items: center; justify-content: center; padding: 15px 12px; cursor: grab; transition: 0.18s ease; text-align: center; } .flow-palette-card:hover { border-color: #5b5ff5; background: #fafaff; transform: translateY(-1px); } .flow-palette-card:active { cursor: grabbing; } .flow-palette-icon { width: 44px; height: 44px; display: flex; align-items: center; justify-content: center; color: #5267f5; font-size: 27px; margin-bottom: 8px; } .flow-palette-label { color: #18213a; font-size: 13px; font-weight: 600; } .flow-palette-description { margin-top: 6px; color: #7c879b; font-size: 11px; line-height: 1.45; } .variables-section { margin-top: 25px; padding-top: 20px; border-top: 1px solid #edf0f5; } .flow-variable-list { display: flex; flex-direction: column; gap: 9px; } .flow-variable-item { display: flex; align-items: center; gap: 12px; padding: 11px 12px; background: #fafbff; border: 1px solid #e8ebf2; border-radius: 10px; cursor: grab; } .flow-variable-icon { width: 35px; height: 35px; border-radius: 10px; background: #eef2ff; color: #6366f1; display: flex; align-items: center; justify-content: center; font-size: 12px; font-weight: 700; } .flow-variable-name { color: #17213a; font-size: 13px; font-weight: 600; } .flow-variable-type { margin-top: 2px; color: #9aa4b7; font-size: 11px; } .flow-empty-variables { color: #9aa4b7; font-size: 12px; padding: 12px 0; } /* ============================================================ COMPACT NODES ============================================================ */ .flow-compact-node { min-width: 210px; min-height: 68px; padding: 11px 16px; border: 1px solid #e1e6ef; border-radius: 13px; background: #ffffff; box-shadow: 0 7px 22px rgba(27, 39, 70, 0.08); display: flex; align-items: center; gap: 12px; } .flow-compact-node-icon { width: 38px; height: 38px; border-radius: 11px; display: flex; align-items: center; justify-content: center; background: #eef2ff; color: #4f46e5; flex: 0 0 38px; } .flow-compact-node-content { min-width: 0; } .flow-compact-node-title { color: #17213a; font-size: 13px; font-weight: 700; white-space: nowrap; } .flow-compact-node-subtitle { color: #8a94a8; font-size: 11px; margin-top: 3px; white-space: nowrap; } .flow-scheduled-node { border-color: #ddd6fe; background: #ffffff; } .flow-scheduled-node .flow-compact-node-icon { background: #eef2ff; color: #5146e5; } .flow-scheduled-node.configured { border-color: #bbf7d0; } .flow-contact-node { border-color: #bfdbfe; } .flow-contact-node .flow-compact-node-icon { background: #eff6ff; color: #2563eb; } .flow-wait-node { border-color: #fde68a; } .flow-wait-node .flow-compact-node-icon { background: #fffbeb; color: #f59e0b; } /* ============================================================ END NODE ============================================================ */ .flow-end-node { min-width: 150px; height: 58px; padding: 0 17px; border-radius: 12px; background: #ecfdf5; border: 1px solid #bbf7d0; display: flex; align-items: center; gap: 10px; box-shadow: 0 7px 20px rgba(22, 101, 52, 0.07); } .flow-end-icon { width: 31px; height: 31px; border-radius: 9px; background: #d1fae5; color: #16a34a; display: flex; align-items: center; justify-content: center; } .flow-end-title { color: #166534; font-size: 13px; font-weight: 700; } /* ============================================================ EMAIL COMPOSITE NODE ============================================================ */ .flow-email-composite-node { width: 900px; min-height: 500px; padding: 0; position: relative; } .flow-email-main-card { width: 350px; min-height: 84px; margin: 0 auto; padding: 14px 20px; border-radius: 14px; border: 1px solid #bcefe2; background: linear-gradient(135deg, #effcf8, #e9faf6); display: flex; align-items: center; gap: 14px; box-shadow: 0 8px 25px rgba(15, 118, 110, 0.08); } .flow-email-main-icon { width: 45px; height: 45px; border-radius: 12px; background: #d8f8ef; color: #059669; display: flex; align-items: center; justify-content: center; } .flow-email-main-title { color: #17213a; font-size: 14px; font-weight: 700; } .flow-email-main-subtitle { color: #718096; font-size: 11px; margin-top: 4px; } .flow-email-branches { display: grid; grid-template-columns: repeat(5, 1fr); gap: 12px; margin-top: 28px; padding: 0 5px; } .flow-email-branch-column { min-width: 0; display: flex; flex-direction: column; align-items: center; position: relative; } .flow-email-branch-label { min-width: 100px; min-height: 36px; padding: 8px 11px; border: 1px solid #dce2eb; background: #ffffff; border-radius: 10px; color: #475569; font-size: 11px; font-weight: 600; display: flex; align-items: center; justify-content: center; text-align: center; box-shadow: 0 3px 10px rgba(15, 23, 42, 0.04); } .flow-email-branch-column:nth-child(2) .flow-email-branch-label { border-color: #c4b5fd; color: #5b21b6; background: #faf7ff; } .flow-email-branch-line { width: 1px; height: 38px; background: #aab7ca; position: relative; } .flow-email-branch-line::after { content: ""; position: absolute; bottom: -1px; left: -4px; width: 8px; height: 8px; border-right: 1px solid #aab7ca; border-bottom: 1px solid #aab7ca; transform: rotate(45deg); background: #ffffff; } .flow-email-internal-step { min-height: 54px; width: 145px; border-radius: 11px; padding: 9px 10px; display: flex; align-items: center; justify-content: center; gap: 7px; text-align: center; font-size: 10px; line-height: 1.3; font-weight: 600; } .flow-email-internal-step.end { background: #ecfdf5; border: 1px solid #c9f0d7; color: #15803d; } .flow-email-internal-step.wait { background: #fff8e7; border: 1px solid #f8df9e; color: #a16207; } .flow-email-internal-step.reminder { background: #f4efff; border: 1px solid #ded1ff; color: #6d28d9; } .flow-email-internal-step.assign { background: #eef6ff; border: 1px solid #cfe3ff; color: #2563eb; } .flow-email-internal-arrow { height: 26px; display: flex; align-items: center; justify-content: center; color: #9aa6ba; font-size: 14px; } .flow-email-mini-mail { min-height: 47px; width: 125px; padding: 8px; border-radius: 10px; border: 1px solid #bcefe2; background: #effcf8; color: #047857; display: flex; align-items: center; justify-content: center; gap: 6px; font-size: 10px; font-weight: 600; } .flow-email-followup-group { display: flex; flex-direction: column; align-items: center; } .flow-email-external-handle { width: 8px !important; height: 8px !important; background: #6366f1 !important; border: 2px solid #ffffff !important; bottom: -5px !important; } /* ============================================================ HANDLES ============================================================ */ .flow-node-handle { width: 8px !important; height: 8px !important; border-radius: 50%; border: 2px solid #ffffff !important; background: #94a3b8 !important; } .flow-node-source { background: #6366f1 !important; } .flow-node-target { background: #94a3b8 !important; } /* ============================================================ FLOATING TOOLBAR ============================================================ */ .flow-floating-toolbar { position: absolute; right: 25px; top: 24px; width: 50px; padding: 8px; background: #ffffff; border: 1px solid #e4e8ef; border-radius: 15px; box-shadow: 0 8px 25px rgba(15, 23, 42, 0.08); z-index: 20; } .flow-tool-btn { width: 34px; height: 38px; border: 0; border-radius: 9px; background: #ffffff; color: #64748b; display: flex; align-items: center; justify-content: center; cursor: pointer; } .flow-tool-btn:hover { background: #f8fafc; color: #334155; } .flow-tool-btn.add { background: #5146e5; color: #ffffff; } .flow-tool-btn.add:hover { background: #4338ca; } .flow-tool-btn:disabled { opacity: 0.45; cursor: not-allowed; } .flow-toolbar-divider { height: 1px; background: #e9edf3; margin: 6px 0; } /* ============================================================ MODE INDICATOR ============================================================ */ .flow-mode-indicator { position: absolute; left: 22px; bottom: 20px; height: 36px; padding: 0 13px; border-radius: 20px; background: #ffffff; border: 1px solid #e7ebf1; box-shadow: 0 5px 15px rgba(15, 23, 42, 0.06); display: flex; align-items: center; gap: 8px; z-index: 20; color: #64748b; font-size: 12px; font-weight: 600; } .mode-dot { width: 8px; height: 8px; border-radius: 50%; } .mode-dot.edit { background: #4f46e5; } .mode-dot.view { background: #94a3b8; } /* ============================================================ MODAL OVERLAY ============================================================ */ .flow-node-modal-overlay { position: fixed; inset: 0; z-index: 9999; background: rgba(15, 23, 42, 0.42); backdrop-filter: blur(6px); -webkit-backdrop-filter: blur(6px); display: flex; align-items: center; justify-content: center; padding: 24px; } .flow-node-modal { width: min(600px, 100%); max-height: calc(100vh - 48px); background: #ffffff; border-radius: 18px; border: 1px solid #e7eaf0; box-shadow: 0 25px 70px rgba(15, 23, 42, 0.22), 0 5px 20px rgba(15, 23, 42, 0.08); display: flex; flex-direction: column; overflow: hidden; } .flow-node-modal-header { min-height: 76px; padding: 16px 20px; border-bottom: 1px solid #edf0f5; display: flex; align-items: center; justify-content: space-between; } .flow-node-modal-heading { display: flex; align-items: center; gap: 12px; } .flow-node-modal-icon { width: 42px; height: 42px; border-radius: 12px; background: #eef2ff; color: #5146e5; display: flex; align-items: center; justify-content: center; font-size: 19px; } .flow-node-modal-heading h3 { margin: 0; color: #17213a; font-size: 16px; font-weight: 700; } .flow-node-modal-heading p { margin: 4px 0 0; color: #8a94a8; font-size: 12px; } .flow-node-modal-close { width: 36px; height: 36px; border: 0; border-radius: 9px; background: #f8fafc; color: #64748b; display: flex; align-items: center; justify-content: center; cursor: pointer; } .flow-node-modal-close:hover { background: #f1f5f9; color: #334155; } .flow-node-modal-body { padding: 22px; overflow-y: auto; } .flow-modal-field { margin-bottom: 17px; } .flow-modal-field label { display: block; margin-bottom: 7px; color: #334155; font-size: 12px; font-weight: 700; } .flow-modal-field input, .flow-modal-field select, .flow-modal-field textarea { width: 100%; border: 1px solid #dfe4ed; border-radius: 10px; background: #ffffff; color: #17213a; outline: none; padding: 11px 12px; font-size: 13px; transition: 0.15s; box-sizing: border-box; } .flow-modal-field input, .flow-modal-field select { height: 43px; } .flow-modal-field textarea { resize: vertical; min-height: 100px; font-family: inherit; } .flow-modal-field input:focus, .flow-modal-field select:focus, .flow-modal-field textarea:focus { border-color: #6366f1; box-shadow: 0 0 0 3px rgba(99, 102, 241, 0.09); } .flow-modal-row { display: grid; grid-template-columns: 1fr 1fr; gap: 14px; } .flow-modal-info-box { display: flex; align-items: flex-start; gap: 11px; padding: 13px; margin-bottom: 18px; border-radius: 11px; background: #eff6ff; border: 1px solid #dbeafe; color: #2563eb; } .flow-modal-info-box.wait { background: #fffbeb; border-color: #fef3c7; color: #b45309; } .flow-modal-info-box.email { background: #ecfdf5; border-color: #d1fae5; color: #047857; } .flow-modal-info-box > svg { margin-top: 2px; flex: 0 0 auto; } .flow-modal-info-box div { display: flex; flex-direction: column; gap: 3px; } .flow-modal-info-box strong { color: #17213a; font-size: 12px; } .flow-modal-info-box span { color: #64748b; font-size: 11px; line-height: 1.45; } .flow-email-modal-branches { border-top: 1px solid #edf0f5; margin-top: 20px; padding-top: 18px; } .flow-email-modal-branches-title { margin-bottom: 10px; color: #17213a; font-size: 12px; font-weight: 700; } .flow-email-modal-outcome { display: flex; align-items: center; justify-content: space-between; gap: 15px; padding: 10px 12px; border: 1px solid #e7ebf1; border-radius: 9px; margin-bottom: 7px; background: #fafbfc; } .flow-email-modal-outcome span { color: #64748b; font-size: 11px; } .flow-email-modal-outcome strong { color: #334155; font-size: 11px; } /* ============================================================ MODAL FOOTER ============================================================ */ .flow-node-modal-footer { min-height: 70px; padding: 13px 20px; border-top: 1px solid #edf0f5; display: flex; justify-content: flex-end; align-items: center; gap: 10px; } .flow-modal-cancel-btn, .flow-modal-save-btn { height: 40px; padding: 0 16px; border-radius: 9px; font-size: 12px; font-weight: 700; cursor: pointer; } .flow-modal-cancel-btn { border: 1px solid #dfe4ed; background: #ffffff; color: #64748b; } .flow-modal-save-btn { border: 0; background: #5146e5; color: #ffffff; } .flow-modal-save-btn:hover { background: #4338ca; } /* ============================================================ MINIMAP ============================================================ */ .flow-minimap { right: 22px !important; bottom: 20px !important; border-radius: 14px !important; border: 1px solid #e5e7eb !important; overflow: hidden; } /* ============================================================ DARK MODE ============================================================ */ .flow-page.dark .flow-editor-shell, .flow-page.dark .flow-canvas-header, .flow-page.dark .flow-node-palette, .flow-page.dark .flow-floating-toolbar, .flow-page.dark .flow-mode-indicator, .flow-page.dark .flow-compact-node, .flow-page.dark .flow-end-node, .flow-page.dark .flow-email-main-card, .flow-page.dark .flow-email-branch-label, .flow-page.dark .flow-node-modal { background: #111827; } .flow-page.dark .flow-canvas-wrapper { background: #0f172a; } .flow-page.dark .flow-canvas-header, .flow-page.dark .flow-node-palette, .flow-page.dark .flow-palette-header, .flow-page.dark .variables-section, .flow-page.dark .flow-node-modal-header, .flow-page.dark .flow-node-modal-footer { border-color: #273244; } .flow-page.dark .flow-header-info h4, .flow-page.dark .flow-palette-section-title, .flow-page.dark .flow-palette-label, .flow-page.dark .flow-compact-node-title, .flow-page.dark .flow-email-main-title, .flow-page.dark .flow-node-modal-heading h3, .flow-page.dark .flow-modal-field label, .flow-page.dark .flow-modal-info-box strong, .flow-page.dark .flow-email-modal-branches-title { color: #f8fafc; } .flow-page.dark .flow-header-info span, .flow-page.dark .flow-palette-description, .flow-page.dark .flow-compact-node-subtitle, .flow-page.dark .flow-node-modal-heading p, .flow-page.dark .flow-modal-info-box span { color: #94a3b8; } .flow-page.dark .flow-modal-field input, .flow-page.dark .flow-modal-field select, .flow-page.dark .flow-modal-field textarea { background: #0f172a; border-color: #334155; color: #f8fafc; } .flow-page.dark .flow-palette-card, .flow-page.dark .flow-palette-search, .flow-page.dark .flow-palette-close, .flow-page.dark .flow-variable-item, .flow-page.dark .flow-tool-btn, .flow-page.dark .flow-node-modal-close { background: #111827; border-color: #334155; } .flow-page.dark .flow-palette-search input { background: transparent; color: #f8fafc; } /* ============================================================ RESPONSIVE ============================================================ */ @media (max-width: 1100px) { .flow-email-composite-node { transform: scale(0.85); transform-origin: top center; } .flow-node-palette { width: 360px; } } @media (max-width: 768px) { .flow-canvas-header { padding: 0 14px; } .flow-header-info { display: none; } .flow-header-right { gap: 7px; } .flow-status { display: none; } .flow-node-palette { width: min(360px, 90vw); } .flow-modal-row { grid-template-columns: 1fr; } } /* Email Preview Offcanvas */ .email-preview-offcanvas { z-index: 99999 !important; width: 420px !important; } .offcanvas-backdrop { z-index: 99998 !important; } ._node_1iipz_1 { position: relative; width: 320px; min-height: 120px; } /* ========================================================= EMAIL CARD ========================================================= */ ._card_1iipz_21 { position: relative; width: 320px; min-height: 108px; display: flex; align-items: center; gap: 14px; padding: 18px 22px; background: #ecfaf7; border: 1px solid #b9eee3; border-radius: 16px; box-sizing: border-box; box-shadow: 0 4px 14px rgba(15, 23, 42, 0.06); } /* ========================================================= EMAIL ICON ========================================================= */ ._icon_1iipz_77 { width: 44px; height: 44px; flex-shrink: 0; display: flex; align-items: center; justify-content: center; background: #d8f7ef; color: #00b894; border-radius: 12px; } /* ========================================================= CONTENT ========================================================= */ ._content_1iipz_119 { min-width: 0; } ._title_1iipz_127 { font-size: 16px; font-weight: 700; line-height: 1.35; color: #07152f; max-width: 210px; } ._subtitle_1iipz_147 { margin-top: 4px; font-size: 13px; font-weight: 400; color: #64748b; } /* ========================================================= TOP HANDLE ========================================================= */ ._topHandle_1iipz_173 { width: 10px !important; height: 10px !important; top: -15px !important; background: #94a3b8 !important; border: 2px solid #ffffff !important; border-radius: 50% !important; box-shadow: none !important; transform: translateX(-50%) !important; transition: none !important; } /* ========================================================= COMMON BOTTOM HANDLE ========================================================= */ ._bottomHandle_1iipz_219 { width: 10px !important; height: 10px !important; bottom: -5px !important; background: #94a3b8 !important; border: 2px solid #ffffff !important; border-radius: 50% !important; box-shadow: none !important; transform: translateX(-50%) !important; transition: none !important; z-index: 10; } /* ========================================================= REMOVE REACT FLOW HANDLE HOVER EFFECT ========================================================= */ ._topHandle_1iipz_173:hover, ._bottomHandle_1iipz_219:hover, ._topHandle_1iipz_173._react-flow__handle_1iipz_273:hover, ._bottomHandle_1iipz_219._react-flow__handle_1iipz_273:hover { width: 10px !important; height: 10px !important; background: #94a3b8 !important; border: 2px solid #ffffff !important; box-shadow: none !important; outline: none !important; transform: translateX(-50%) !important; } /* ========================================================= REMOVE FOCUS EFFECT ========================================================= */ ._topHandle_1iipz_173:focus, ._bottomHandle_1iipz_219:focus { outline: none !important; box-shadow: none !important; } /* ========================================================= REMOVE TRANSITION / SCALE ========================================================= */ ._topHandle_1iipz_173, ._bottomHandle_1iipz_219 { transition: none !important; animation: none !important; } /* ========================================================= PALETTE ========================================================= */ ._palette_5rnlw_9 { position: absolute; top: 20px; left: 20px; right: auto; width: 86px; display: flex; flex-direction: column; align-items: center; gap: 8px; padding: 8px 6px 10px; background: transparent; z-index: 100; } /* ========================================================= CLOSE BUTTON ========================================================= */ ._closeButton_5rnlw_61 { position: absolute; top: 0; right: -7px; width: 30px; height: 30px; display: flex; align-items: center; justify-content: center; border: 1px solid #e2e5ec; border-radius: 50%; background: #ffffff; color: #17213a; cursor: pointer; box-shadow: 0 3px 9px rgba(23, 33, 58, 0.08); transition: background 0.2s ease, border-color 0.2s ease, color 0.2s ease, transform 0.2s ease, box-shadow 0.2s ease; } ._closeButton_5rnlw_61:hover { color: #ff3030; border-color: #ffb8b8; background: #fff8f8; transform: scale(1.04); box-shadow: 0 4px 12px rgba(255, 48, 48, 0.1); } /* ========================================================= ITEMS CONTAINER ========================================================= */ ._items_5rnlw_155 { width: 102px; display: flex; flex-direction: column; align-items: center; gap: 8px; padding: 12px 8px 12px; background: rgba(255, 255, 255, 0.95); border: 1px solid #e2e6ee; border-radius: 20px; box-shadow: 0 7px 20px rgba(20, 33, 61, 0.07), 0 2px 7px rgba(20, 33, 61, 0.035); max-height: calc(100vh - 80px); overflow-y: auto; scrollbar-width: none; box-sizing: border-box; } ._items_5rnlw_155::-webkit-scrollbar { display: none; } /* ========================================================= CARD ========================================================= */ ._card_5rnlw_231 { width: 82px; min-height: 68px; padding: 8px 5px; display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 5px; background: #ffffff; border: 1px solid #e2e6ee; border-radius: 14px; color: #14213d; cursor: grab; box-shadow: 0 2px 6px rgba(20, 33, 61, 0.045); transition: border-color 0.2s ease, background 0.2s ease, color 0.2s ease, box-shadow 0.2s ease, transform 0.2s ease; box-sizing: border-box; } ._card_5rnlw_231:hover { border-color: #ff4a4a; background: #fffafa; color: #ff3030; box-shadow: 0 4px 12px rgba(255, 48, 48, 0.09); transform: translateY(-1px); } ._card_5rnlw_231:active { cursor: grabbing; transform: scale(0.97); } /* ========================================================= ICON ========================================================= */ ._icon_5rnlw_345 { width: 23px; height: 23px; display: flex; align-items: center; justify-content: center; font-size: 19px; line-height: 1; color: inherit; } ._icon_5rnlw_345 svg { width: 19px; height: 19px; stroke-width: 1.8; } /* ========================================================= LABEL ========================================================= */ ._label_5rnlw_397 { max-width: 72px; text-align: center; font-size: 10.5px; line-height: 13px; font-weight: 600; color: inherit; white-space: normal; } /* ========================================================= RESPONSIVE ========================================================= */ @media (max-width: 900px) { ._palette_5rnlw_9 { top: 15px; left: 15px; width: 78px; } ._items_5rnlw_155 { width: 94px; gap: 7px; padding: 10px 7px; } ._card_5rnlw_231 { width: 76px; min-height: 64px; padding: 7px 4px; gap: 4px; } ._label_5rnlw_397 { font-size: 10px; line-height: 12px; } ._icon_5rnlw_345 { width: 22px; height: 22px; font-size: 18px; } ._icon_5rnlw_345 svg { width: 18px; height: 18px; } ._closeButton_5rnlw_61 { width: 28px; height: 28px; } } /* ============================================================ OVERLAY ============================================================ */ ._overlay_94kvm_9 { position: fixed; inset: 0; z-index: 2000; display: flex; align-items: center; justify-content: center; padding: 20px; background: rgba(15, 23, 42, 0.22); backdrop-filter: blur(2px); } /* ============================================================ MODAL ============================================================ */ ._modal_94kvm_51 { width: min(760px, calc(100vw - 40px)); max-height: calc(100vh - 40px); display: flex; flex-direction: column; background: #ffffff; border: 1px solid #dce3ef; border-radius: 11px; box-shadow: 0 20px 60px rgba(20, 33, 61, 0.14), 0 5px 18px rgba(20, 33, 61, 0.06); overflow: hidden; } /* ============================================================ EMAIL MODAL Compact size so 100% browser zoom looks like 75% ============================================================ */ ._emailModal_94kvm_103 { width: min(820px, calc(100vw - 40px)); max-height: calc(100vh - 40px); } /* ============================================================ HEADER ============================================================ */ ._header_94kvm_123 { min-height: 58px; padding: 11px 16px; display: flex; align-items: center; justify-content: space-between; flex-shrink: 0; border-bottom: 1px solid #e7ebf2; background: #ffffff; } ._headerLeft_94kvm_155 { display: flex; align-items: center; gap: 10px; } ._headerIcon_94kvm_169 { width: 34px; height: 34px; display: flex; align-items: center; justify-content: center; flex-shrink: 0; border-radius: 9px; background: #e9fbf7; color: #00a98f; font-size: 17px; } ._header_94kvm_123 h3 { margin: 0; color: #111827; font-size: 15px; font-weight: 700; line-height: 18px; } ._header_94kvm_123 p { margin: 2px 0 0; color: #7a8498; font-size: 10px; line-height: 13px; } ._closeButton_94kvm_247 { width: 30px; height: 30px; display: flex; align-items: center; justify-content: center; flex-shrink: 0; border: 0; border-radius: 7px; background: transparent; color: #697386; cursor: pointer; transition: background 0.18s ease, color 0.18s ease; } ._closeButton_94kvm_247:hover { background: #f3f5f8; color: #17213a; } /* ============================================================ EMAIL BODY ============================================================ */ ._emailBody_94kvm_317 { flex: 1; min-height: 0; overflow-y: auto; background: #f8faff; padding: 8px 8px 0; } /* ============================================================ TEMPLATE DETAILS CARD ============================================================ */ ._templateSection_94kvm_349 { background: #ffffff; border: 1px solid #dce3ef; border-radius: 9px; padding: 11px 11px 8px; } ._sectionTitle_94kvm_369 { margin-bottom: 9px; color: #111827; font-size: 12px; font-weight: 700; line-height: 15px; } /* ============================================================ TWO COLUMN ============================================================ */ ._twoColumn_94kvm_401 { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: 10px; } /* ============================================================ FIELD ============================================================ */ ._field_94kvm_429 { margin-bottom: 9px; min-width: 0; } ._field_94kvm_429 label { display: block; margin-bottom: 4px; color: #111827; font-size: 9px; font-weight: 500; line-height: 12px; } ._field_94kvm_429 label span { margin-left: 2px; color: #ff3030; } ._field_94kvm_429 input, ._field_94kvm_429 select { width: 100%; height: 30px; padding: 0 9px; box-sizing: border-box; border: 1px solid #d5ddeb; border-radius: 6px; outline: none; background: #ffffff; color: #17213a; font-size: 10px; transition: border-color 0.18s ease, box-shadow 0.18s ease; } ._field_94kvm_429 input::placeholder { color: #8e99ad; } ._field_94kvm_429 input:focus, ._field_94kvm_429 select:focus { border-color: #9bb5ef; box-shadow: 0 0 0 2px rgba(65, 105, 225, 0.08); } ._field_94kvm_429 select { appearance: auto; cursor: pointer; } /* ============================================================ SUBJECT ============================================================ */ ._subjectRow_94kvm_577 { display: flex; align-items: stretch; gap: 6px; } ._subjectRow_94kvm_577 > input { flex: 1; } ._variableWrapper_94kvm_601 { position: relative; flex-shrink: 0; } ._variableButton_94kvm_613 { height: 30px; padding: 0 11px; border: 1px solid #d5ddeb; border-radius: 6px; background: #ffffff; color: #17213a; font-size: 9px; font-weight: 600; cursor: pointer; white-space: nowrap; transition: border-color 0.18s ease, background 0.18s ease; } ._variableButton_94kvm_613:hover { border-color: #b9c6dc; background: #f8faff; } ._variableMenu_94kvm_677 { position: absolute; top: calc(100% + 5px); right: 0; width: 190px; max-height: 200px; overflow-y: auto; z-index: 50; padding: 4px; background: #ffffff; border: 1px solid #dce3ef; border-radius: 7px; box-shadow: 0 10px 28px rgba(20, 33, 61, 0.12); } ._variableMenu_94kvm_677 button { width: 100%; display: block; padding: 7px 8px; border: 0; border-radius: 5px; background: transparent; color: #273653; font-size: 9px; text-align: left; cursor: pointer; } ._variableMenu_94kvm_677 button:hover { background: #f3f6fb; color: #2563eb; } /* ============================================================ EDITOR ============================================================ */ ._editor_94kvm_793 { border: 1px solid #d5ddeb; border-radius: 6px; overflow: hidden; background: #ffffff; } /* ============================================================ TOOLBAR ============================================================ */ ._toolbar_94kvm_821 { min-height: 31px; display: flex; align-items: center; gap: 1px; padding: 0 5px; border-bottom: 1px solid #dfe5ee; background: #ffffff; overflow-x: auto; } ._toolbar_94kvm_821:last-of-type { border-bottom: 1px solid #dfe5ee; } ._toolbar_94kvm_821 button { width: 24px; height: 24px; flex: 0 0 auto; display: flex; align-items: center; justify-content: center; border: 0; border-radius: 4px; background: transparent; color: #39445a; font-size: 11px; cursor: pointer; } ._toolbar_94kvm_821 button:hover { background: #f0f3f8; color: #17213a; } ._toolbar_94kvm_821 button svg { width: 12px; height: 12px; } ._toolbar_94kvm_821 select { height: 24px; min-width: 62px; padding: 0 4px; border: 0; border-right: 1px solid transparent; outline: none; background: transparent; color: #39445a; font-size: 8px; cursor: pointer; } ._toolbar_94kvm_821 select:focus { background: #f5f7fa; } ._toolbarDivider_94kvm_985 { width: 1px; height: 18px; margin: 0 3px; flex: 0 0 auto; background: #e3e7ee; } /* ============================================================ EDITABLE CONTENT ============================================================ */ ._editorContent_94kvm_1017 { min-height: 250px; max-height: 315px; overflow-y: auto; padding: 14px 13px; outline: none; color: #17213a; background: #ffffff; font-family: Arial, sans-serif; font-size: 12px; line-height: 1.6; } ._editorContent_94kvm_1017:focus { outline: none; } ._editorContent_94kvm_1017 p { margin: 0 0 10px; } ._editorContent_94kvm_1017 h1, ._editorContent_94kvm_1017 h2, ._editorContent_94kvm_1017 h3 { color: #111827; } ._editorContent_94kvm_1017 img { max-width: 100%; height: auto; } /* ============================================================ ATTACHMENT ============================================================ */ ._attachmentBox_94kvm_1109 { width: 100%; min-height: 44px; display: flex; align-items: center; gap: 8px; padding: 7px 10px; box-sizing: border-box; border: 1px dashed #cdd7e7; border-radius: 6px; background: #ffffff; color: #697386; text-align: left; cursor: pointer; transition: border-color 0.18s ease, background 0.18s ease; } ._attachmentBox_94kvm_1109:hover { border-color: #9eb0cb; background: #fafcff; } ._attachmentBox_94kvm_1109 > svg { width: 18px; height: 18px; flex-shrink: 0; color: #718096; } ._attachmentBox_94kvm_1109 strong { display: block; margin-bottom: 1px; color: #17213a; font-size: 9px; font-weight: 600; } ._attachmentBox_94kvm_1109 span { display: block; color: #8792a6; font-size: 7px; line-height: 10px; } ._attachmentList_94kvm_1247 { margin-top: 6px; display: flex; flex-direction: column; gap: 4px; } ._attachmentItem_94kvm_1267 { min-height: 28px; display: flex; align-items: center; justify-content: space-between; padding: 4px 7px; border: 1px solid #e1e6ef; border-radius: 5px; background: #fafbfc; } ._attachmentItem_94kvm_1267 > div { display: flex; align-items: center; gap: 6px; min-width: 0; } ._attachmentItem_94kvm_1267 svg { width: 12px; height: 12px; color: #697386; } ._attachmentItem_94kvm_1267 span { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; color: #39445a; font-size: 8px; } ._attachmentItem_94kvm_1267 button { width: 22px; height: 22px; display: flex; align-items: center; justify-content: center; border: 0; border-radius: 5px; background: transparent; color: #8a94a7; cursor: pointer; } ._attachmentItem_94kvm_1267 button:hover { background: #fff1f1; color: #ef4444; } /* ============================================================ AUTOSAVE ============================================================ */ ._autosave_94kvm_1421 { height: 27px; display: flex; align-items: center; gap: 4px; color: #8993a5; font-size: 7px; } ._autosave_94kvm_1421 > span:first-child { color: #20b486; font-size: 9px; } ._characterCount_94kvm_1461 { margin-left: auto; } /* ============================================================ FOOTER ============================================================ */ ._footer_94kvm_1477 { min-height: 48px; display: flex; align-items: center; justify-content: flex-end; gap: 7px; padding: 8px 12px; flex-shrink: 0; border-top: 1px solid #e2e7ef; background: #ffffff; } ._cancelButton_94kvm_1517, ._saveButton_94kvm_1519 { height: 29px; padding: 0 13px; border-radius: 6px; font-size: 9px; font-weight: 600; cursor: pointer; } ._cancelButton_94kvm_1517 { border: 1px solid #d5ddeb; background: #ffffff; color: #39445a; } ._cancelButton_94kvm_1517:hover { background: #f7f9fc; } ._saveButton_94kvm_1519 { border: 1px solid #2563eb; background: #2563eb; color: #ffffff; box-shadow: 0 2px 5px rgba(37, 99, 235, 0.16); } ._saveButton_94kvm_1519:hover { background: #1d4ed8; } /* ============================================================ GENERIC BODY ============================================================ */ ._genericBody_94kvm_1607 { padding: 16px; overflow-y: auto; } ._infoBox_94kvm_1619 { display: flex; align-items: flex-start; gap: 8px; padding: 10px; margin-bottom: 13px; border: 1px solid #e1e7f0; border-radius: 7px; background: #f8faff; } ._infoBox_94kvm_1619 > svg { width: 15px; height: 15px; color: #2563eb; flex-shrink: 0; margin-top: 1px; } ._infoBox_94kvm_1619 strong { display: block; color: #17213a; font-size: 10px; } ._infoBox_94kvm_1619 span { display: block; margin-top: 2px; color: #778196; font-size: 9px; } /* ============================================================ RESPONSIVE ============================================================ */ @media (max-width: 900px) { ._emailModal_94kvm_103 { width: calc(100vw - 30px); } ._twoColumn_94kvm_401 { grid-template-columns: 1fr; } ._emailBody_94kvm_317 { padding: 7px 7px 0; } ._templateSection_94kvm_349 { padding: 10px; } ._editorContent_94kvm_1017 { min-height: 230px; } } @media (max-width: 550px) { ._overlay_94kvm_9 { padding: 7px; } ._modal_94kvm_51, ._emailModal_94kvm_103 { width: 100%; max-height: calc(100vh - 14px); border-radius: 8px; } ._header_94kvm_123 { padding: 10px; } ._subjectRow_94kvm_577 { flex-direction: column; } ._variableButton_94kvm_613 { width: 100%; } ._variableMenu_94kvm_677 { width: 100%; } ._footer_94kvm_1477 { padding: 8px 10px; } } /* ========================================================= FLOWLABS LAYOUT ========================================================= */ ._page_1bafx_9 { width: 100%; height: 100%; min-height: 0; background: #f7f8fb; color: #fc3233; overflow: hidden; } ._page_1bafx_9._dark_1bafx_27 { background: #0f1117; color: #f4f6fb; } /* ========================================================= EDITOR SHELL ========================================================= */ ._editorShell_1bafx_45 { position: relative; width: 100%; height: 100%; min-height: 0; display: flex; flex-direction: column; overflow: hidden; background: #ffffff; } ._page_1bafx_9._dark_1bafx_27 ._editorShell_1bafx_45 { background: #11141b; } /* * Fullscreen is the DEFAULT state. * The editor occupies the complete available viewport. */ ._editorShell_1bafx_45._fullscreen_1bafx_83 { position: fixed; inset: 0; z-index: 9999; width: 100vw; height: 100vh; border-radius: 0; } /* * Normal state after pressing fullscreen button. */ ._editorShell_1bafx_45._normal_1bafx_107 { position: relative; width: 100%; height: calc(100vh - 10px); min-height: 620px; margin: 0; border: 1px solid #e7eaf0; border-radius: 18px; overflow: hidden; box-shadow: 0 10px 35px rgba(20, 33, 61, 0.06), 0 2px 10px rgba(20, 33, 61, 0.03); } ._page_1bafx_9._dark_1bafx_27 ._editorShell_1bafx_45._normal_1bafx_107 { border-color: #292e38; background: #11141b; box-shadow: 0 15px 40px rgba(0, 0, 0, 0.28); } /* ========================================================= PREMIUM HEADER ========================================================= */ ._canvasHeader_1bafx_155 { position: relative; z-index: 20; width: 100%; min-height: 72px; padding: 11px 18px; display: flex; align-items: center; justify-content: space-between; gap: 24px; box-sizing: border-box; background: linear-gradient( 180deg, rgba(255, 255, 255, 0.98), rgba(250, 251, 253, 0.96) ); border-bottom: 1px solid #e8ebf1; box-shadow: 0 1px 0 rgba(255, 255, 255, 0.9) inset, 0 6px 20px rgba(20, 33, 61, 0.035); backdrop-filter: blur(20px); -webkit-backdrop-filter: blur(20px); } ._canvasHeader_1bafx_155::after { content: ""; position: absolute; left: 0; right: 0; bottom: -1px; height: 1px; background: linear-gradient( 90deg, transparent 0%, rgba(252, 50, 51, 0.08) 30%, rgba(252, 50, 51, 0.16) 50%, rgba(252, 50, 51, 0.08) 70%, transparent 100% ); pointer-events: none; } ._page_1bafx_9._dark_1bafx_27 ._canvasHeader_1bafx_155 { background: linear-gradient( 180deg, rgba(20, 23, 31, 0.98), rgba(16, 19, 25, 0.97) ); border-bottom-color: #292e38; box-shadow: 0 1px 0 rgba(255, 255, 255, 0.02) inset, 0 8px 25px rgba(0, 0, 0, 0.16); } /* ========================================================= HEADER LEFT ========================================================= */ ._headerLeft_1bafx_303 { min-width: 0; display: flex; align-items: center; gap: 12px; } /* ========================================================= HEADER ICON ========================================================= */ ._headerIcon_1bafx_329 { position: relative; width: 39px; height: 39px; flex: 0 0 39px; display: flex; align-items: center; justify-content: center; border-radius: 12px; border: 1px solid rgba(252, 50, 51, 0.14); background: linear-gradient(145deg, #ffffff 0%, #fff7f7 100%); color: #fc3233; box-shadow: 0 5px 14px rgba(252, 50, 51, 0.08), 0 1px 2px rgba(20, 33, 61, 0.05); transition: transform 0.2s ease, box-shadow 0.2s ease; } /* .headerIcon::before { content: ""; position: absolute; width: 6px; height: 6px; top: 5px; right: 5px; border-radius: 50%; background: #fc3233; box-shadow: 0 0 0 3px rgba(252, 50, 51, 0.08); opacity: 0.9; } */ ._headerIcon_1bafx_329:hover { transform: translateY(-1px); box-shadow: 0 8px 20px rgba(252, 50, 51, 0.12), 0 2px 5px rgba(20, 33, 61, 0.06); } ._page_1bafx_9._dark_1bafx_27 ._headerIcon_1bafx_329 { background: linear-gradient(145deg, #242832, #191d25); border-color: rgba(252, 50, 51, 0.2); color: #ff5a5b; box-shadow: 0 6px 18px rgba(0, 0, 0, 0.25); } /* ========================================================= HEADER INFO ========================================================= */ ._headerInfo_1bafx_471 { min-width: 0; display: flex; flex-direction: column; gap: 2px; } /* ========================================================= TITLE ROW ========================================================= */ ._headerTitleRow_1bafx_497 { display: flex; align-items: center; min-width: 0; gap: 7px; } ._headerInfo_1bafx_471 h4 { margin: 0; max-width: 430px; font-size: 14px; line-height: 19px; font-weight: 750; letter-spacing: -0.015em; color: #182033; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; } ._headerLiveDot_1bafx_551 { width: 5px; height: 5px; flex: 0 0 5px; border-radius: 50%; background: #fc3233; box-shadow: 0 0 0 3px rgba(252, 50, 51, 0.08); } ._headerDescription_1bafx_577 { max-width: 500px; font-size: 10.5px; line-height: 15px; font-weight: 500; color: #8a92a3; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; } ._page_1bafx_9._dark_1bafx_27 ._headerInfo_1bafx_471 h4 { color: #f3f5f9; } ._page_1bafx_9._dark_1bafx_27 ._headerDescription_1bafx_577 { color: #858e9f; } ._page_1bafx_9._dark_1bafx_27 ._headerLiveDot_1bafx_551 { background: #ff5a5b; box-shadow: 0 0 0 3px rgba(252, 50, 51, 0.1); } /* ========================================================= HEADER RIGHT ========================================================= */ ._headerRight_1bafx_643 { display: flex; align-items: center; justify-content: flex-end; gap: 7px; flex-shrink: 0; } /* ========================================================= STATUS ========================================================= */ ._status_1bafx_671 { height: 31px; padding: 0 10px; display: inline-flex; align-items: center; gap: 7px; border-radius: 9px; border: 1px solid #e4e8ee; background: #fafbfc; color: #626b7c; font-size: 9.5px; font-weight: 700; letter-spacing: 0.01em; white-space: nowrap; transition: border-color 0.18s ease, background 0.18s ease; } ._status_1bafx_671._published_1bafx_731 { color: #16845a; background: linear-gradient(180deg, #f5fcf8, #effaf4); border-color: #d5efe2; } ._status_1bafx_671._draft_1bafx_747 { color: #b16c08; background: linear-gradient(180deg, #fffaf1, #fff7e9); border-color: #f2e2c1; } ._statusDot_1bafx_763 { width: 6px; height: 6px; border-radius: 50%; background: #18a66c; box-shadow: 0 0 0 3px rgba(24, 166, 108, 0.1); } ._status_1bafx_671._draft_1bafx_747 ._statusDot_1bafx_763 { background: #f59e0b; box-shadow: 0 0 0 3px rgba(245, 158, 11, 0.1); } ._page_1bafx_9._dark_1bafx_27 ._status_1bafx_671 { background: #191d25; border-color: #303642; } ._page_1bafx_9._dark_1bafx_27 ._status_1bafx_671._published_1bafx_731 { color: #48d69a; background: rgba(16, 185, 129, 0.07); border-color: rgba(16, 185, 129, 0.16); } ._page_1bafx_9._dark_1bafx_27 ._status_1bafx_671._draft_1bafx_747 { color: #f2bd62; background: rgba(245, 158, 11, 0.07); border-color: rgba(245, 158, 11, 0.16); } /* ========================================================= VIEW BADGE ========================================================= */ ._viewBadge_1bafx_847 { height: 31px; padding: 0 11px; display: inline-flex; align-items: center; gap: 7px; border: 1px solid #e4e7ed; border-radius: 9px; background: #f9fafc; color: #687184; font-size: 9.5px; font-weight: 650; white-space: nowrap; } ._viewIcon_1bafx_895 { display: inline-flex; font-size: 8px; color: #7c3aed; } ._page_1bafx_9._dark_1bafx_27 ._viewBadge_1bafx_847 { background: #191d25; border-color: #303642; color: #9ba4b5; } /* ========================================================= HEADER BUTTON ========================================================= */ ._headerBtn_1bafx_935 { position: relative; height: 32px; padding: 0 13px; display: inline-flex; align-items: center; justify-content: center; gap: 7px; border: 1px solid transparent; border-radius: 9px; font-size: 10px; font-weight: 700; letter-spacing: 0.005em; cursor: pointer; transition: transform 0.18s ease, box-shadow 0.18s ease, background 0.18s ease, border-color 0.18s ease; } ._headerBtn_1bafx_935 svg { flex-shrink: 0; } /* ========================================================= EDIT BUTTON ========================================================= */ ._editBtn_1bafx_1013 { background: #ffffff; color: #4e586b; border-color: #dfe3ea; box-shadow: 0 1px 2px rgba(20, 33, 61, 0.03); } ._editBtn_1bafx_1013:hover { color: #fc3233; border-color: rgba(252, 50, 51, 0.24); background: #fffafa; transform: translateY(-1px); box-shadow: 0 6px 16px rgba(252, 50, 51, 0.08); } /* ========================================================= SAVE BUTTON ========================================================= */ ._saveBtn_1bafx_1065 { color: #ffffff; background: linear-gradient(135deg, #fc3233 0%, #e9282a 100%); border-color: #fc3233; box-shadow: 0 5px 14px rgba(252, 50, 51, 0.18), 0 1px 2px rgba(252, 50, 51, 0.12); } ._saveBtn_1bafx_1065:hover { background: linear-gradient(135deg, #ff4546 0%, #e9282a 100%); transform: translateY(-1px); box-shadow: 0 8px 20px rgba(252, 50, 51, 0.24); } ._saveBtn_1bafx_1065:active { transform: translateY(0); } ._saveBtn_1bafx_1065:disabled { opacity: 0.55; cursor: not-allowed; transform: none; box-shadow: none; } ._page_1bafx_9._dark_1bafx_27 ._editBtn_1bafx_1013 { background: #191d25; color: #c1c8d4; border-color: #303642; } ._page_1bafx_9._dark_1bafx_27 ._editBtn_1bafx_1013:hover { color: #ff6263; background: #20242d; border-color: rgba(252, 50, 51, 0.24); } ._page_1bafx_9._dark_1bafx_27 ._saveBtn_1bafx_1065 { color: #ffffff; background: linear-gradient(135deg, #fc3233, #e9282a); } /* ========================================================= PUBLISH CONTROL ========================================================= */ ._publishControl_1bafx_1185 { min-height: 32px; padding: 4px 7px 4px 10px; display: inline-flex; align-items: center; gap: 10px; border: 1px solid #e3e7ed; border-radius: 10px; background: #ffffff; box-shadow: 0 1px 2px rgba(20, 33, 61, 0.025); } ._publishText_1bafx_1223 { display: flex; flex-direction: column; gap: 0; line-height: 1; } ._publishLabel_1bafx_1241 { font-size: 7.5px; font-weight: 650; color: #9aa2b1; text-transform: uppercase; letter-spacing: 0.06em; } ._publishValue_1bafx_1265 { margin-top: 3px; font-size: 9px; font-weight: 700; color: #596377; } ._page_1bafx_9._dark_1bafx_27 ._publishControl_1bafx_1185 { background: #191d25; border-color: #303642; } ._page_1bafx_9._dark_1bafx_27 ._publishLabel_1bafx_1241 { color: #70798a; } ._page_1bafx_9._dark_1bafx_27 ._publishValue_1bafx_1265 { color: #b8c0ce; } /* ========================================================= SWITCH ========================================================= */ ._switch_1bafx_1321 { position: relative; width: 30px; height: 17px; display: inline-block; flex: 0 0 30px; } ._switch_1bafx_1321 input { width: 0; height: 0; opacity: 0; } ._slider_1bafx_1357 { position: absolute; inset: 0; border-radius: 20px; background: #d9dee7; cursor: pointer; transition: background 0.2s ease, box-shadow 0.2s ease; } ._slider_1bafx_1357::before { content: ""; position: absolute; width: 13px; height: 13px; left: 2px; top: 2px; border-radius: 50%; background: #ffffff; box-shadow: 0 1px 4px rgba(0, 0, 0, 0.18); transition: transform 0.2s ease; } ._switch_1bafx_1321 input:checked + ._slider_1bafx_1357 { background: #18a66c; box-shadow: 0 0 0 3px rgba(24, 166, 108, 0.07); } ._switch_1bafx_1321 input:checked + ._slider_1bafx_1357::before { transform: translateX(13px); } /* ========================================================= CANVAS ========================================================= */ ._canvasWrapper_1bafx_1457 { position: relative; flex: 1; min-height: 0; overflow: visible; background: #f8f9fc; } ._page_1bafx_9._dark_1bafx_27 ._canvasWrapper_1bafx_1457 { background: #101319; } /* ========================================================= REACT FLOW ========================================================= */ ._canvasWrapper_1bafx_1457 .react-flow { width: 100%; height: 100%; } ._canvasWrapper_1bafx_1457 .react-flow__renderer { background: transparent; } ._canvasWrapper_1bafx_1457 .react-flow__pane { cursor: default; } ._canvasWrapper_1bafx_1457 .react-flow__edge-path { stroke: #b8c0ce; stroke-width: 1.7; } ._page_1bafx_9._dark_1bafx_27 ._canvasWrapper_1bafx_1457 .react-flow__edge-path { stroke: #4b5565; } ._canvasWrapper_1bafx_1457 .react-flow__connection-path { stroke: #7c3aed; stroke-width: 2; } ._canvasWrapper_1bafx_1457 .react-flow__handle { transition: transform 0.18s ease, background 0.18s ease, box-shadow 0.18s ease; } ._canvasWrapper_1bafx_1457 .react-flow__handle:hover { transform: scale(1.2); } /* ========================================================= FLOATING TOOLBAR ========================================================= */ ._floatingToolbar_1bafx_1575 { position: absolute; right: 20px; top: 20px; z-index: 30; display: flex; align-items: center; gap: 4px; padding: 5px; border: 1px solid rgba(224, 228, 236, 0.95); border-radius: 12px; background: rgba(255, 255, 255, 0.9); box-shadow: 0 10px 28px rgba(20, 33, 61, 0.08), 0 2px 8px rgba(20, 33, 61, 0.04); backdrop-filter: blur(16px); -webkit-backdrop-filter: blur(16px); } ._page_1bafx_9._dark_1bafx_27 ._floatingToolbar_1bafx_1575 { background: rgba(25, 29, 37, 0.92); border-color: #303642; box-shadow: 0 12px 30px rgba(0, 0, 0, 0.28); } /* ========================================================= TOOL BUTTON ========================================================= */ ._toolBtn_1bafx_1651 { width: 34px; height: 34px; display: flex; align-items: center; justify-content: center; border: 0; border-radius: 8px; background: transparent; color: #596377; cursor: pointer; transition: background 0.18s ease, color 0.18s ease, transform 0.18s ease; } ._toolBtn_1bafx_1651:hover { background: #f0f2f6; color: #fc3233; transform: translateY(-1px); } ._toolBtn_1bafx_1651._add_1bafx_1707 { background: #fc3233; color: #ffffff; } ._toolBtn_1bafx_1651._add_1bafx_1707:hover { background: #15223d; color: #ffffff; } ._toolBtn_1bafx_1651:disabled { opacity: 0.4; cursor: not-allowed; transform: none; } ._page_1bafx_9._dark_1bafx_27 ._toolBtn_1bafx_1651 { color: #aeb6c5; } ._page_1bafx_9._dark_1bafx_27 ._toolBtn_1bafx_1651:hover { background: #242a34; color: #ffffff; } ._page_1bafx_9._dark_1bafx_27 ._toolBtn_1bafx_1651._add_1bafx_1707 { background: #f4f6fa; color: #151922; } ._page_1bafx_9._dark_1bafx_27 ._toolBtn_1bafx_1651._add_1bafx_1707:hover { background: #ffffff; } /* ========================================================= TOOLBAR DIVIDER ========================================================= */ ._toolbarDivider_1bafx_1783 { width: 1px; height: 20px; margin: 0 2px; background: #e4e7ed; } ._page_1bafx_9._dark_1bafx_27 ._toolbarDivider_1bafx_1783 { background: #343a46; } /* ========================================================= MINIMAP ========================================================= */ ._canvasWrapper_1bafx_1457 .flow-minimap { right: 20px; bottom: 20px; width: 150px; height: 96px; overflow: hidden; border: 1px solid #e3e7ee; border-radius: 12px; background: rgba(255, 255, 255, 0.9); box-shadow: 0 8px 24px rgba(20, 33, 61, 0.08); backdrop-filter: blur(12px); } ._page_1bafx_9._dark_1bafx_27 ._canvasWrapper_1bafx_1457 .flow-minimap { border-color: #303642; background: rgba(25, 29, 37, 0.9); } /* ========================================================= CONTROLS ========================================================= */ ._canvasWrapper_1bafx_1457 .flow-controls { left: 20px; bottom: 20px; border: 1px solid #e3e7ee; border-radius: 11px; overflow: hidden; background: rgba(255, 255, 255, 0.92); box-shadow: 0 8px 22px rgba(20, 33, 61, 0.07); } ._canvasWrapper_1bafx_1457 .flow-controls button { width: 30px; height: 30px; border: 0; border-bottom: 1px solid #e8ebf0; background: transparent; color: #657085; } ._canvasWrapper_1bafx_1457 .flow-controls button:last-child { border-bottom: 0; } ._canvasWrapper_1bafx_1457 .flow-controls button:hover { background: #f3f5f8; color: #fc3233; } ._page_1bafx_9._dark_1bafx_27 ._canvasWrapper_1bafx_1457 .flow-controls { border-color: #303642; background: rgba(25, 29, 37, 0.94); } ._page_1bafx_9._dark_1bafx_27 ._canvasWrapper_1bafx_1457 .flow-controls button { border-bottom-color: #303642; color: #aeb6c5; } ._page_1bafx_9._dark_1bafx_27 ._canvasWrapper_1bafx_1457 .flow-controls button:hover { background: #242a34; color: #ffffff; } /* ========================================================= RESPONSIVE ========================================================= */ @media (max-width: 1100px) { ._canvasHeader_1bafx_155 { padding: 9px 12px; } ._headerInfo_1bafx_471 h4 { max-width: 280px; } ._headerInfo_1bafx_471 span { max-width: 300px; } ._headerRight_1bafx_643 { gap: 6px; } ._status_1bafx_671, ._viewBadge_1bafx_847, ._publishControl_1bafx_1185 { display: none; } } @media (max-width: 700px) { ._canvasHeader_1bafx_155 { min-height: 58px; } ._headerIcon_1bafx_329 { width: 32px; height: 32px; flex-basis: 32px; } ._headerInfo_1bafx_471 h4 { max-width: 180px; font-size: 12px; } ._headerInfo_1bafx_471 span { display: none; } ._headerBtn_1bafx_935 { height: 30px; padding: 0 10px; font-size: 9.5px; } ._floatingToolbar_1bafx_1575 { right: 12px; top: 12px; } ._canvasWrapper_1bafx_1457 .flow-minimap { right: 12px; bottom: 12px; width: 120px; height: 78px; } ._canvasWrapper_1bafx_1457 .flow-controls { left: 12px; bottom: 12px; } } /* ========================================================= FULLSCREEN BODY FIX ========================================================= */ body.flowlabs-fullscreen-active { overflow: hidden; } body.flowlabs-fullscreen-active #root { width: 100%; height: 100%; } ._flow-controls_1bafx_1871 button:hover { color: #fc3233 !important; } ._flow-controls_1bafx_1871 button:hover svg { color: #fc3233 !important; stroke: #fc3233 !important; } ._canvasWrapper_1bafx_1457 .react-flow__handle-bottom { top: auto !important; left: 50% !important; bottom: -4px !important; transform: translateX(-50%) !important; } ._page_gkn9i_1 { position: relative; width: 100%; min-width: 0; display: flex; flex-direction: column; gap: var(--space-4); padding-top: var(--space-4); box-sizing: border-box; } ._pageHeader_gkn9i_31 { display: flex; align-items: flex-start; justify-content: space-between; gap: var(--space-5); margin-bottom: var(--space-5); } ._pageHeader_gkn9i_31 h1 { margin: 0; color: var(--ink, #101b3d); font-size: var(--font-size-2xl); font-weight: 700; line-height: 1.2; letter-spacing: -0.35px; } ._pageHeader_gkn9i_31 p { margin: var(--space-2) 0 0; color: var(--ink-soft, #68738d); font-size: var(--font-size-sm); } /* ========================================================= CALENDAR SUMMARY ========================================================= */ ._summaryGrid_gkn9i_85 { width: 100%; display: grid; grid-template-columns: repeat(7, minmax(150px, 1fr)); gap: var(--space-3); margin-bottom: var(--space-5); overflow-x: auto; overflow-y: hidden; padding-bottom: 2px; } ._summaryCard_gkn9i_109 { --summary-accent: var(--brand); --summary-soft: var(--brand-soft); min-width: 0; min-height: 86px; display: flex; align-items: center; gap: var(--space-4); padding: var(--space-4); border: 1px solid var(--line); border-radius: 10px; background: var(--surface); box-shadow: var(--sh-sm); } ._summaryIcon_gkn9i_149 { width: 48px; height: 48px; flex: 0 0 48px; display: inline-flex; align-items: center; justify-content: center; border: 1px solid var(--summary-accent); border-radius: 50%; background: var(--summary-soft); color: var(--summary-accent); } ._summaryContent_gkn9i_181 { min-width: 0; display: flex; flex-direction: column; gap: var(--space-1); } ._summaryContent_gkn9i_181 > span { overflow: hidden; color: var(--ink-soft); font-size: var(--font-size-xs); font-weight: 500; text-overflow: ellipsis; white-space: nowrap; } ._summaryContent_gkn9i_181 > strong { color: var(--ink); font-size: var(--font-size-xl); font-weight: 700; line-height: 1; } ._summaryTotal_gkn9i_237 { --summary-accent: var(--brand); --summary-soft: var(--brand-soft); } ._summaryDraft_gkn9i_247 { --summary-accent: var(--warning, var(--brand)); --summary-soft: var(--warning-soft, var(--brand-soft)); } ._summaryScheduled_gkn9i_257 { --summary-accent: var(--warning, var(--brand)); --summary-soft: var(--warning-soft, var(--brand-soft)); } ._summarySending_gkn9i_267 { --summary-accent: var(--info, var(--brand)); --summary-soft: var(--info-soft, var(--brand-soft)); } ._summaryCompleted_gkn9i_277 { --summary-accent: var(--success, var(--brand)); --summary-soft: var(--success-soft, var(--brand-soft)); } ._summaryFailed_gkn9i_287 { --summary-accent: var(--danger, var(--brand)); --summary-soft: var(--danger-soft, var(--brand-soft)); } ._summaryCancelled_gkn9i_297 { --summary-accent: var(--ink-soft); --summary-soft: var(--surface-muted); } ._calendarCard_gkn9i_307 { overflow: hidden; border: 1px solid var(--line, #e3e8f0); border-radius: 12px; background: var(--surface, #ffffff); box-shadow: var(--sh-sm, 0 1px 2px rgba(15, 23, 42, 0.05)); } ._calendarToolbar_gkn9i_323 { min-height: 62px; display: grid; grid-template-columns: 1fr auto 1fr; align-items: center; gap: var(--space-4); padding: var(--space-3) var(--space-4); border-bottom: 1px solid var(--line, #e3e8f0); } ._viewTabs_gkn9i_343 { width: max-content; display: inline-flex; overflow: hidden; border: 1px solid var(--line-strong, #d9e0ea); border-radius: 7px; background: var(--surface, #ffffff); } ._viewTabs_gkn9i_343 button { min-width: 82px; height: 35px; padding: 0 var(--space-4); border: 0; border-right: 1px solid var(--line, #e3e8f0); background: transparent; color: var(--ink, #101b3d); font: inherit; font-size: var(--font-size-xs); font-weight: 500; cursor: pointer; transition: color var(--t-fast, 140ms ease), background var(--t-fast, 140ms ease); } ._viewTabs_gkn9i_343 button:last-child { border-right: 0; } ._viewTabs_gkn9i_343 button:hover { background: var(--brand-soft, #eef4ff); color: var(--brand, #0866ff); } ._viewTabs_gkn9i_343 ._activeTab_gkn9i_413 { background: var(--brand, #0866ff); color: #ffffff; } ._viewTabs_gkn9i_343 ._activeTab_gkn9i_413:hover { background: var(--brand-hover, #0055e8); color: #ffffff; } ._monthNavigation_gkn9i_433 { display: grid; grid-template-columns: 38px minmax(170px, 1fr) 38px; align-items: center; justify-items: center; gap: var(--space-3); } ._monthNavigation_gkn9i_433 h2 { margin: 0; color: var(--ink, #101b3d); font-size: var(--font-size-lg); font-weight: 700; white-space: nowrap; } ._navButton_gkn9i_465 { width: 38px; height: 38px; display: inline-flex; align-items: center; justify-content: center; padding: 0; border: 1px solid var(--line, #e3e8f0); border-radius: 7px; background: var(--surface, #ffffff); color: var(--ink, #101b3d); cursor: pointer; transition: border-color var(--t-fast, 140ms ease), background var(--t-fast, 140ms ease), color var(--t-fast, 140ms ease); } ._navButton_gkn9i_465:hover { border-color: var(--brand, #0866ff); background: var(--brand-soft, #eef4ff); color: var(--brand, #0866ff); } ._dragHint_gkn9i_513 { display: flex; align-items: center; justify-content: flex-end; gap: var(--space-2); color: var(--ink-soft, #68738d); font-size: var(--font-size-xs); white-space: nowrap; } ._dragHintIcon_gkn9i_533 { width: 12px; height: 12px; border: 1px dashed var(--ink-muted, #9099ad); border-radius: 3px; } ._calendarBody_gkn9i_547 { position: relative; min-width: 0; background: var(--surface, #ffffff); } /* ========================================================= FULL CALENDAR ========================================================= */ ._calendarBody_gkn9i_547 .fc { font-family: var(--font, "Inter", sans-serif); font-size: var(--font-size-base); color: var(--ink, #101b3d); } ._calendarBody_gkn9i_547 .fc-theme-standard .fc-scrollgrid { border: 0; } ._calendarBody_gkn9i_547 .fc-theme-standard td, ._calendarBody_gkn9i_547 .fc-theme-standard th { border-color: var(--line, #e3e8f0); } ._calendarBody_gkn9i_547 .fc-col-header-cell { background: #ffffff; } ._calendarBody_gkn9i_547 .fc-col-header-cell-cushion { width: 100%; padding: var(--space-3) var(--space-2); color: var(--ink, #101b3d); font-size: var(--font-size-xs); font-weight: 600; text-decoration: none; } ._calendarBody_gkn9i_547 .fc-daygrid-day-frame { min-height: 110px; padding: var(--space-2); } ._calendarBody_gkn9i_547 .fc-daygrid-day-top { display: block; } ._calendarBody_gkn9i_547 .fc-daygrid-day-number { width: 100%; padding: 0; text-decoration: none; } ._calendarBody_gkn9i_547 .fc-day-other { background: #fbfcfe; } ._calendarBody_gkn9i_547 .fc-day-other .fc-daygrid-day-number { color: var(--ink-muted, #9099ad); } ._calendarBody_gkn9i_547 .fc-day-today { background: #ffffff !important; } ._calendarBody_gkn9i_547 .fc-daygrid-day-events { margin-top: var(--space-2); } ._calendarBody_gkn9i_547 .fc-daygrid-event-harness { margin-top: var(--space-1) !important; } ._calendarBody_gkn9i_547 .fc-daygrid-event { margin: 0 !important; border: 0; border-radius: 7px; background: transparent; white-space: normal; cursor: grab; } ._calendarBody_gkn9i_547 .fc-daygrid-event:active { cursor: grabbing; } ._calendarBody_gkn9i_547 .fc-event-main { color: inherit; } ._calendarBody_gkn9i_547 .fc-daygrid-more-link { display: inline-flex; margin-top: 4px; padding: var(--space-1) var(--space-2); border-radius: 5px; background: var(--brand-soft, #eef4ff); color: var(--brand, #0866ff); font-size: var(--font-size-xs); font-weight: 600; text-decoration: none; } ._calendarBody_gkn9i_547 .fc-timegrid-slot { height: 42px; } ._calendarBody_gkn9i_547 .fc-list { border: 0; } ._calendarBody_gkn9i_547 .fc-list-day-cushion { background: var(--surface-muted, #f7f9fc); } /* ========================================================= DAY CELL ========================================================= */ ._dayCellTop_gkn9i_783 { position: relative; width: 100%; min-height: 27px; } ._dayNumber_gkn9i_795 { width: 24px; height: 24px; display: inline-flex; align-items: center; justify-content: center; color: var(--ink, #101b3d); font-size: var(--font-size-xs); font-weight: 600; line-height: 1; } ._todayNumber_gkn9i_819 { border-radius: 999px; background: var(--brand, #0866ff); color: #ffffff; } ._dayAddButton_gkn9i_831 { position: absolute; top: 34px; left: 50%; z-index: 4; width: 64px; height: 64px; display: flex; align-items: center; justify-content: center; transform: translateX(-50%); opacity: 0; visibility: hidden; border: 1.5px dashed var(--brand, #0866ff); border-radius: 8px; background: var(--brand-soft, #eef4ff); color: var(--brand, #0866ff); font-size: var(--font-size-xl); cursor: pointer; transition: opacity var(--t-fast, 140ms ease), visibility var(--t-fast, 140ms ease), background var(--t-fast, 140ms ease); } ._calendarBody_gkn9i_547 .fc-daygrid-day:hover ._dayAddButton_gkn9i_831 { opacity: 1; visibility: visible; } /* Existing campaign irukkura date-ku compact add button top-right */ /* Existing campaign irukkura date-ku small add button */ ._dayAddButtonWithEvent_gkn9i_895 { top: 2px; right: 2px; left: auto; width: 32px; height: 32px; transform: none; /* default hide */ opacity: 0; visibility: hidden; display: flex; align-items: center; justify-content: center; padding: 0; border: 1.5px dashed var(--brand, #0866ff); border-radius: 7px; background: var(--brand-soft, #eef4ff); color: var(--brand, #0866ff); font-size: 18px; cursor: pointer; transition: opacity var(--t-fast, 140ms ease), visibility var(--t-fast, 140ms ease), background var(--t-fast, 140ms ease); } ._calendarBody_gkn9i_547 .fc-daygrid-day:hover ._dayAddButtonWithEvent_gkn9i_895 { opacity: 1; visibility: visible; } ._dayAddButtonWithEvent_gkn9i_895:hover { background: #dbeafe; } ._dayAddButton_gkn9i_831:hover, ._dayAddButtonWithEvent_gkn9i_895:hover { background: var(--brand-soft); } /* ========================================================= EVENT ========================================================= */ ._eventCard_gkn9i_999 { min-height: 60px; display: flex; align-items: flex-start; gap: var(--space-2); padding: var(--space-2); overflow: hidden; border: 1px solid currentColor; border-radius: 7px; } ._eventIcon_gkn9i_1021 { width: 22px; height: 22px; flex: 0 0 22px; display: inline-flex; align-items: center; justify-content: center; border-radius: 6px; color: #ffffff; } ._eventInfo_gkn9i_1043 { min-width: 0; display: flex; flex-direction: column; gap: var(--space-1); } ._eventInfo_gkn9i_1043 strong { overflow: hidden; color: var(--ink, #101b3d); font-size: var(--font-size-xs); font-weight: 650; line-height: 1.2; text-overflow: ellipsis; white-space: nowrap; } ._eventInfo_gkn9i_1043 small { color: var(--ink-soft, #68738d); font-size: var(--font-size-xs); font-weight: 500; } ._eventStatus_gkn9i_1089 { display: inline-flex; align-items: center; gap: var(--space-1); color: var(--ink-soft, #68738d); font-size: var(--font-size-xs); } ._eventStatus_gkn9i_1089 i { width: 6px; height: 6px; border-radius: 50%; } /* ========================================================= CHANNEL COLORS ========================================================= */ ._channelEmail_gkn9i_1125 { color: #0866ff; background: #eff6ff; border-color: #93c5fd; } ._channelEmail_gkn9i_1125 ._eventIcon_gkn9i_1021, ._createTypeIcon_gkn9i_1139._channelEmail_gkn9i_1125, ._detailChannelIcon_gkn9i_1141._channelEmail_gkn9i_1125 { background: #0866ff; color: #ffffff; } ._channelSms_gkn9i_1151 { color: #f97316; background: #fff7ed; border-color: #fdba74; } ._channelSms_gkn9i_1151 ._eventIcon_gkn9i_1021, ._createTypeIcon_gkn9i_1139._channelSms_gkn9i_1151, ._detailChannelIcon_gkn9i_1141._channelSms_gkn9i_1151 { background: #f97316; color: #ffffff; } ._channelSocial_gkn9i_1177 { color: #8b5cf6; background: #f5f3ff; border-color: #c4b5fd; } ._channelSocial_gkn9i_1177 ._eventIcon_gkn9i_1021, ._createTypeIcon_gkn9i_1139._channelSocial_gkn9i_1177, ._detailChannelIcon_gkn9i_1141._channelSocial_gkn9i_1177 { background: #8b5cf6; color: #ffffff; } ._channelWhatsapp_gkn9i_1203 { color: #16a34a; background: #f0fdf4; border-color: #86efac; } ._channelWhatsapp_gkn9i_1203 ._eventIcon_gkn9i_1021, ._createTypeIcon_gkn9i_1139._channelWhatsapp_gkn9i_1203, ._detailChannelIcon_gkn9i_1141._channelWhatsapp_gkn9i_1203 { background: #16a34a; color: #ffffff; } ._channelVoice_gkn9i_1229 { color: #ef4444; background: #fff1f2; border-color: #fda4af; } ._channelVoice_gkn9i_1229 ._eventIcon_gkn9i_1021, ._createTypeIcon_gkn9i_1139._channelVoice_gkn9i_1229, ._detailChannelIcon_gkn9i_1141._channelVoice_gkn9i_1229 { background: #ef4444; color: #ffffff; } /* ========================================================= STATUS ========================================================= */ ._statusDraft_gkn9i_1263 { background: #94a3b8; } ._statusScheduled_gkn9i_1271 { background: #f97316; } ._statusPublishing_gkn9i_1279 { background: #8b5cf6; } ._statusPublished_gkn9i_1287 { background: #22c55e; } ._statusCompleted_gkn9i_1295 { background: #14b8a6; } ._statusFailed_gkn9i_1303 { background: #ef4444; } ._detailStatusBadge_gkn9i_1311._statusDraft_gkn9i_1263, ._detailStatusBadge_gkn9i_1311._statusScheduled_gkn9i_1271, ._detailStatusBadge_gkn9i_1311._statusPublishing_gkn9i_1279, ._detailStatusBadge_gkn9i_1311._statusPublished_gkn9i_1287, ._detailStatusBadge_gkn9i_1311._statusCompleted_gkn9i_1295, ._detailStatusBadge_gkn9i_1311._statusFailed_gkn9i_1303 { background: transparent; } ._detailStatusBadge_gkn9i_1311._statusDraft_gkn9i_1263 { color: #64748b; border-color: #cbd5e1; } ._detailStatusBadge_gkn9i_1311._statusScheduled_gkn9i_1271 { color: #ea580c; border-color: #fed7aa; background: #fff7ed; } ._detailStatusBadge_gkn9i_1311._statusPublishing_gkn9i_1279 { color: #7c3aed; border-color: #ddd6fe; background: #f5f3ff; } ._detailStatusBadge_gkn9i_1311._statusPublished_gkn9i_1287 { color: #15803d; border-color: #bbf7d0; background: #f0fdf4; } ._detailStatusBadge_gkn9i_1311._statusCompleted_gkn9i_1295 { color: #0f766e; border-color: #99f6e4; background: #f0fdfa; } ._detailStatusBadge_gkn9i_1311._statusFailed_gkn9i_1303 { color: #dc2626; border-color: #fecaca; background: #fef2f2; } /* ========================================================= CENTER MODAL OVERLAY ========================================================= */ ._modalOverlay_gkn9i_1407 { position: fixed; inset: 0; z-index: 1400; display: flex; align-items: center; justify-content: center; padding: var(--space-4); background: rgba(15, 23, 42, 0.42); backdrop-filter: blur(2px); -webkit-backdrop-filter: blur(2px); } /* ========================================================= CREATE POPOVER ========================================================= */ ._createPopover_gkn9i_1441 { position: relative; z-index: 1; width: 360px; max-width: 100%; max-height: calc(100vh - (var(--space-8) * 2)); overflow-x: hidden; overflow-y: auto; border: 1px solid var(--line, #e3e8f0); border-radius: 12px; background: var(--surface, #ffffff); box-shadow: var(--sh-lg, 0 18px 45px rgba(15, 23, 42, 0.2)); } ._createPopoverTitle_gkn9i_1469 { padding: var(--space-4) var(--space-4) var(--space-3); color: var(--ink, #101b3d); font-size: var(--font-size-xs); font-weight: 700; } ._createTypeList_gkn9i_1483 { padding: var(--space-1) var(--space-2) var(--space-3); } ._createTypeItem_gkn9i_1491 { width: 100%; display: flex; align-items: center; gap: var(--space-3); padding: var(--space-2); border: 0; border-radius: 7px; background: transparent; text-align: left; cursor: pointer; transition: background var(--t-fast, 140ms ease); } ._createTypeItem_gkn9i_1491:hover { background: var(--surface-muted, #f7f9fc); } ._createTypeIcon_gkn9i_1139 { width: 28px; height: 28px; flex: 0 0 28px; display: inline-flex; align-items: center; justify-content: center; border-radius: 7px; } ._createTypeText_gkn9i_1547 { min-width: 0; display: flex; flex-direction: column; gap: var(--space-1); } ._createTypeText_gkn9i_1547 strong { color: var(--ink, #101b3d); font-size: var(--font-size-xs); font-weight: 650; } ._createTypeText_gkn9i_1547 small { color: var(--ink-soft, #68738d); font-size: var(--font-size-xs); } ._popoverClose_gkn9i_1583 { position: absolute; top: 8px; right: 8px; width: 27px; height: 27px; display: inline-flex; align-items: center; justify-content: center; border: 0; border-radius: 6px; background: transparent; color: var(--ink-soft, #68738d); cursor: pointer; } ._popoverClose_gkn9i_1583:hover { background: var(--surface-muted, #f7f9fc); } /* ========================================================= MORE CAMPAIGNS CENTER MODAL ========================================================= */ ._moreCampaignsModal_gkn9i_1631 { width: 365px; max-width: calc(100vw - 32px); max-height: min(575px, calc(100vh - 48px)); display: flex; flex-direction: column; overflow: hidden; border: 1px solid var(--line, #e3e8f0); border-radius: 15px; background: #ffffff; box-shadow: 0 18px 42px rgba(15, 23, 42, 0.2); } ._moreCampaignsHeader_gkn9i_1657 { position: relative; flex: 0 0 auto; padding: 16px 48px 15px 18px; background: #5b5cf6; color: #ffffff; } ._moreCampaignsHeader_gkn9i_1657 h3 { margin: 0; color: #ffffff; font-size: var(--font-size-lg); font-weight: 700; line-height: 1.25; } ._moreCampaignsHeader_gkn9i_1657 p { margin: 7px 0 0; color: rgba(255, 255, 255, 0.95); font-size: var(--font-size-xs); line-height: 1.4; } ._moreCampaignsHeader_gkn9i_1657 p strong { color: #ffffff; font-weight: 700; } ._moreCampaignsClose_gkn9i_1713 { position: absolute; top: 12px; right: 12px; width: 30px; height: 30px; display: inline-flex; align-items: center; justify-content: center; padding: 0; border: 0; border-radius: 7px; background: rgba(255, 255, 255, 0.14); color: #ffffff; cursor: pointer; } ._moreCampaignsClose_gkn9i_1713:hover { background: rgba(255, 255, 255, 0.24); } ._moreCampaignsList_gkn9i_1755 { min-height: 0; flex: 1; display: flex; flex-direction: column; gap: 9px; overflow-y: auto; padding: 10px; background: #ffffff; scrollbar-width: thin; } ._moreCampaignItem_gkn9i_1779 { display: grid; grid-template-columns: minmax(0, 1fr) auto; align-items: center; gap: 16px; padding: 14px 16px; border: 0; border-radius: 10px; background: var(--warning-soft, var(--surface-muted)); color: var(--ink); } ._moreCampaignLeft_gkn9i_1809 { min-width: 0; display: flex; align-items: center; gap: var(--space-3); } ._moreCampaignText_gkn9i_1825 { min-width: 0; } ._moreCampaignText_gkn9i_1825 > strong { display: block; overflow: hidden; color: var(--ink); font-size: var(--font-size-sm); font-weight: 700; line-height: 1.3; text-overflow: ellipsis; white-space: nowrap; } ._moreCampaignMeta_gkn9i_1861 { display: flex; align-items: center; flex-wrap: wrap; gap: 4px; margin-top: 6px; color: var(--ink-soft); font-size: var(--font-size-xs); line-height: 1.35; } ._moreCampaignRight_gkn9i_1889 { min-width: 88px; display: flex; flex-direction: column; align-items: flex-end; justify-content: center; gap: 8px; } ._moreCampaignStatus_gkn9i_1911 { display: inline-flex; align-items: center; justify-content: flex-end; gap: 5px; color: var(--ink-soft); font-size: var(--font-size-xs); white-space: nowrap; } ._moreCampaignStatus_gkn9i_1911 i { width: 6px; height: 6px; flex: 0 0 6px; border-radius: 50%; } ._moreCampaignViewButton_gkn9i_1949 { min-width: 42px; height: 22px; display: inline-flex; align-items: center; justify-content: center; gap: 4px; padding: 0 9px; border: 1px solid var(--brand); border-radius: 6px; background: var(--surface); color: var(--brand); font: inherit; font-size: var(--font-size-xs); font-weight: 500; cursor: pointer; } ._moreCampaignViewButton_gkn9i_1949:hover { background: var(--brand-soft); color: var(--brand-hover); } ._moreCampaignsEmpty_gkn9i_2007 { padding: 26px 16px; color: var(--ink-soft, #68738d); font-size: var(--font-size-sm); text-align: center; } @media (max-width: 560px) { ._moreCampaignsModal_gkn9i_1631 { width: 100%; max-width: 100%; max-height: calc(100vh - 24px); } } /* ========================================================= DETAIL POPOVER ========================================================= */ ._detailPopover_gkn9i_2045 { position: relative; z-index: 1; width: 420px; max-width: 100%; max-height: calc(100vh - (var(--space-8) * 2)); overflow-x: hidden; overflow-y: auto; border: 1px solid var(--line, #e3e8f0); border-radius: 12px; background: var(--surface, #ffffff); box-shadow: var(--sh-lg, 0 18px 45px rgba(15, 23, 42, 0.2)); } ._detailHeader_gkn9i_2073 { display: flex; align-items: flex-start; justify-content: space-between; gap: var(--space-3); padding: var(--space-4) var(--space-4) var(--space-2); } ._detailTitleWrap_gkn9i_2089 { min-width: 0; display: flex; align-items: center; gap: var(--space-3); } ._detailChannelIcon_gkn9i_1141 { width: 28px; height: 28px; flex: 0 0 28px; display: inline-flex; align-items: center; justify-content: center; border-radius: 7px; } ._detailTitleWrap_gkn9i_2089 h3 { margin: 0; overflow: hidden; color: var(--ink, #101b3d); font-size: var(--font-size-base); font-weight: 700; text-overflow: ellipsis; white-space: nowrap; } ._detailClose_gkn9i_2143 { width: 28px; height: 28px; flex: 0 0 28px; display: inline-flex; align-items: center; justify-content: center; border: 0; border-radius: 6px; background: transparent; color: var(--ink-soft, #68738d); cursor: pointer; } ._detailClose_gkn9i_2143:hover { background: var(--surface-muted, #f7f9fc); } ._detailStatusBadge_gkn9i_1311 { width: max-content; margin: 0 var(--space-4) var(--space-2); padding: var(--space-1) var(--space-2); border: 1px solid var(--line, #e3e8f0); border-radius: 999px; font-size: var(--font-size-xs); font-weight: 650; } ._detailRows_gkn9i_2199 { padding: var(--space-1) var(--space-4) var(--space-3); } ._detailRow_gkn9i_2199 { min-height: 34px; display: grid; grid-template-columns: 100px minmax(0, 1fr); align-items: center; gap: var(--space-3); } ._detailRowLabel_gkn9i_2223 { display: inline-flex; align-items: center; gap: var(--space-2); color: var(--ink-soft, #68738d); font-size: var(--font-size-xs); } ._detailRow_gkn9i_2199 strong { overflow: hidden; color: var(--ink, #101b3d); font-size: var(--font-size-xs); font-weight: 550; text-align: right; text-overflow: ellipsis; white-space: nowrap; } ._detailStatusValue_gkn9i_2259 { display: inline-flex; align-items: center; justify-content: flex-end; gap: var(--space-1); color: var(--ink, #101b3d); font-size: var(--font-size-xs); } ._detailStatusValue_gkn9i_2259 i { width: 6px; height: 6px; border-radius: 50%; } ._ownerValue_gkn9i_2289 { display: inline-flex; align-items: center; justify-content: flex-end; gap: var(--space-2); } ._ownerAvatar_gkn9i_2303 { width: 22px; height: 22px; display: inline-flex; align-items: center; justify-content: center; border-radius: 50%; background: var(--brand-soft, #eef4ff); color: var(--brand, #0866ff); font-size: var(--font-size-xs); font-weight: 700; } ._detailActions_gkn9i_2329 { display: grid; gap: var(--space-2); padding: 0 var(--space-4) var(--space-4); } ._detailActions_gkn9i_2329 .app-btn { width: 100%; min-height: 34px; display: inline-flex; align-items: center; justify-content: center; gap: var(--space-2); font-size: var(--font-size-xs); } /* ========================================================= RESPONSIVE ========================================================= */ @media (max-width: 1100px) { ._calendarToolbar_gkn9i_323 { grid-template-columns: 1fr auto; } ._monthNavigation_gkn9i_433 { grid-column: 1 / -1; grid-row: 1; justify-self: center; } ._viewTabs_gkn9i_343 { grid-column: 1; grid-row: 2; } ._dragHint_gkn9i_513 { grid-column: 2; grid-row: 2; } } @media (max-width: 850px) { ._page_gkn9i_1 { padding: var(--space-4); } ._pageHeader_gkn9i_31 { flex-direction: column; } ._calendarToolbar_gkn9i_323 { display: flex; flex-direction: column; align-items: stretch; } ._monthNavigation_gkn9i_433 { order: -1; } ._viewTabs_gkn9i_343 { width: 100%; } ._viewTabs_gkn9i_343 button { flex: 1; } ._dragHint_gkn9i_513 { justify-content: flex-start; } ._calendarBody_gkn9i_547 { overflow-x: auto; } ._calendarBody_gkn9i_547 .fc { min-width: 760px; } } @media (max-width: 560px) { ._page_gkn9i_1 { padding: var(--space-3); } ._pageHeader_gkn9i_31 h1 { font-size: var(--font-size-xl); } ._monthNavigation_gkn9i_433 { grid-template-columns: 36px minmax(120px, 1fr) 36px; } ._modalOverlay_gkn9i_1407 { padding: var(--space-3); } ._createPopover_gkn9i_1441, ._detailPopover_gkn9i_2045 { width: 100%; max-height: calc(100vh - (var(--space-3) * 2)); } } /* ========================================================= CAMPAIGN IFRAME MODAL ========================================================= */ ._iframeModalOverlay_gkn9i_2547 { position: fixed; inset: 0; z-index: 9999; display: flex; align-items: center; justify-content: center; padding: var(--space-5); background: rgba(15, 23, 42, 0.48); backdrop-filter: blur(3px); -webkit-backdrop-filter: blur(3px); } ._iframeModal_gkn9i_2547 { width: min(1400px, calc(100vw - (var(--space-10) * 2))); height: min(820px, calc(100vh - (var(--space-8) * 2))); display: flex; flex-direction: column; overflow: hidden; border: 1px solid var(--line, #e3e8f0); border-radius: 14px; background: var(--surface, #ffffff); box-shadow: var(--sh-lg, 0 22px 60px rgba(15, 23, 42, 0.22)); } ._iframeModalHeader_gkn9i_2603 { min-height: 64px; flex: 0 0 auto; display: flex; align-items: center; justify-content: space-between; gap: var(--space-4); padding: var(--space-3) var(--space-4); border-bottom: 1px solid var(--line, #e3e8f0); background: var(--surface, #ffffff); } ._iframeModalTitle_gkn9i_2627 { min-width: 0; display: flex; align-items: center; gap: var(--space-3); } ._iframeModalIcon_gkn9i_2641 { width: 34px; height: 34px; flex: 0 0 34px; display: inline-flex; align-items: center; justify-content: center; border-radius: 8px; } ._iframeModalTitle_gkn9i_2627 h3 { margin: 0; color: var(--ink, #101b3d); font-size: var(--font-size-base); font-weight: 700; } ._iframeModalTitle_gkn9i_2627 p { margin: var(--space-1) 0 0; color: var(--ink-soft, #68738d); font-size: var(--font-size-xs); } ._iframeModalClose_gkn9i_2687 { width: 34px; height: 34px; flex: 0 0 34px; display: inline-flex; align-items: center; justify-content: center; padding: 0; border: 0; border-radius: 8px; background: var(--surface-muted, #f7f9fc); color: var(--ink-soft, #68738d); cursor: pointer; } ._iframeModalClose_gkn9i_2687:hover { background: var(--brand-soft, #eef4ff); color: var(--brand, #0866ff); } ._iframeBody_gkn9i_2727 { min-height: 0; flex: 1; padding: var(--space-4); background: var(--color-bg-light, var(--surface-muted)); } ._campaignIframe_gkn9i_2745 { width: 100%; height: 100%; display: block; border: 1px solid var(--line); border-radius: 10px; background: var(--surface); } @media (max-width: 850px) { ._iframeModalOverlay_gkn9i_2547 { padding: var(--space-3); } ._iframeModal_gkn9i_2547 { width: 100%; height: calc(100vh - (var(--space-3) * 2)); } } @media (max-width: 560px) { ._iframeModalOverlay_gkn9i_2547 { padding: var(--space-2); } ._iframeModal_gkn9i_2547 { height: calc(100vh - (var(--space-2) * 2)); border-radius: 10px; } ._iframeModalHeader_gkn9i_2603 { min-height: 58px; padding: var(--space-2) var(--space-3); } } /* ========================================================= CompetitorAnalytics.module.css ========================================================= */ /* ========================================================= PAGE ========================================================= */ ._page_17j2y_17 { width: 100%; min-height: 100%; padding: 15px 10px; color: #172033; background: #f8fafc; box-sizing: border-box; } /* ========================================================= TOP CONTROLS ========================================================= */ ._topControls_17j2y_43 { display: flex; align-items: center; justify-content: space-between; gap: 16px; margin-top: 22px; margin-bottom: 20px; padding: 0; } ._platformTabs_17j2y_63 { display: flex; align-items: center; gap: 6px; min-width: 0; padding: 4px; background: #ffffff; border: 1px solid #e6eaf0; border-radius: 10px; box-shadow: 0 1px 2px rgba(15, 23, 42, 0.03); } ._platformTab_17j2y_63 { display: inline-flex; align-items: center; justify-content: center; gap: 8px; min-height: 38px; padding: 0 14px; border: 1px solid transparent; border-radius: 7px; background: transparent; color: #64748b; font-size: 13px; font-weight: 600; line-height: 1; white-space: nowrap; cursor: pointer; transition: background 0.18s ease, border-color 0.18s ease, color 0.18s ease, box-shadow 0.18s ease; } ._platformTab_17j2y_63:hover { background: #f8fafc; color: #334155; } ._platformActive_17j2y_143 { background: #ffffff; border-color: #dfe5ed; color: #172033; box-shadow: 0 2px 6px rgba(15, 23, 42, 0.07); } ._platformLoading_17j2y_157 { display: flex; align-items: center; gap: 8px; min-height: 38px; padding: 0 14px; color: #64748b; font-size: 13px; font-weight: 500; } ._facebookLogo_17j2y_179 { color: #1877f2; font-size: 17px; } ._instagramLogo_17j2y_189 { color: #d946ef; font-size: 17px; } ._youtubeLogo_17j2y_199 { color: #ff0000; font-size: 18px; } ._linkedinLogo_17j2y_209 { color: #0a66c2; font-size: 17px; } ._telegramLogo_17j2y_219 { color: #229ed9; font-size: 17px; } /* ========================================================= PAGE SELECTOR ========================================================= */ ._pageSelector_17j2y_237 { display: inline-flex; align-items: center; justify-content: center; gap: 9px; min-height: 40px; max-width: 310px; padding: 0 13px; border: 1px solid #e3e8ef; border-radius: 9px; background: #ffffff; color: #475569; font-size: 12.5px; font-weight: 600; white-space: nowrap; cursor: pointer; box-shadow: 0 1px 2px rgba(15, 23, 42, 0.025); transition: border-color 0.18s ease, background 0.18s ease, box-shadow 0.18s ease; } ._pageSelector_17j2y_237:hover { border-color: #cfd7e3; background: #fbfcfe; box-shadow: 0 2px 7px rgba(15, 23, 42, 0.05); } ._pageSelector_17j2y_237 span { overflow: hidden; text-overflow: ellipsis; } ._pageSelectorBrandIcon_17j2y_305 { flex: 0 0 auto; font-size: 16px; } /* ========================================================= MAIN CONTENT GRID ========================================================= */ ._contentGrid_17j2y_323 { display: grid; grid-template-columns: 278px minmax(0, 1fr); gap: 20px; align-items: start; } ._sidebar_17j2y_337 { display: flex; flex-direction: column; gap: 16px; min-width: 0; } ._main_17j2y_351 { min-width: 0; } /* ========================================================= COMMON CARD ========================================================= */ ._addCard_17j2y_367, ._savedCard_17j2y_369, ._kpiCard_17j2y_371, ._chartCard_17j2y_373, ._insightsCard_17j2y_375, ._performanceCard_17j2y_377, ._postsCard_17j2y_379, ._formatCard_17j2y_381 { background: #ffffff; border: 1px solid #e6eaf0; border-radius: 12px; box-shadow: 0 1px 2px rgba(15, 23, 42, 0.025), 0 3px 12px rgba(15, 23, 42, 0.025); } /* ========================================================= ADD COMPETITOR ========================================================= */ ._addCard_17j2y_367 { padding: 18px; } ._cardTitle_17j2y_415 { margin: 0 0 17px; color: #172033; font-size: 15px; font-weight: 700; line-height: 1.35; } ._label_17j2y_431 { display: block; margin: 0 0 7px; color: #475569; font-size: 12px; font-weight: 600; } ._label_17j2y_431 span { color: #94a3b8; font-weight: 500; } ._input_17j2y_457 { display: block; width: 100%; height: 40px; margin-bottom: 14px; padding: 0 12px; border: 1px solid #dce2ea; border-radius: 8px; outline: none; background: #ffffff; color: #172033; font-family: inherit; font-size: 13px; box-sizing: border-box; transition: border-color 0.18s ease, box-shadow 0.18s ease, background 0.18s ease; } ._input_17j2y_457::placeholder { color: #a0aabd; } ._input_17j2y_457:hover { border-color: #cbd5e1; } ._input_17j2y_457:focus { border-color: #8aa9d9; background: #ffffff; box-shadow: 0 0 0 3px rgba(59, 130, 246, 0.09); } ._fetchButton_17j2y_525 { display: inline-flex; align-items: center; justify-content: center; gap: 8px; width: 100%; min-height: 40px; padding: 0 14px; border: 0; border-radius: 8px; background: #2563eb; color: #ffffff; font-size: 12.5px; font-weight: 700; cursor: pointer; transition: background 0.18s ease, box-shadow 0.18s ease, transform 0.18s ease; } ._fetchButton_17j2y_525:hover:not(:disabled) { background: #1d4ed8; box-shadow: 0 4px 12px rgba(37, 99, 235, 0.18); } ._fetchButton_17j2y_525:active:not(:disabled) { transform: translateY(1px); } ._fetchButton_17j2y_525:disabled { opacity: 0.55; cursor: not-allowed; } ._helperText_17j2y_595 { margin: 10px 1px 0; color: #94a3b8; font-size: 11px; line-height: 1.55; } /* ========================================================= SAVED COMPETITORS ========================================================= */ ._savedCard_17j2y_369 { overflow: hidden; } ._savedHeader_17j2y_625 { padding: 14px 16px; border-bottom: 1px solid #edf0f4; color: #334155; font-size: 12px; font-weight: 700; } ._savedList_17j2y_641 { display: flex; flex-direction: column; } ._savedItem_17j2y_651 { display: flex; align-items: center; gap: 8px; min-width: 0; padding: 10px 11px; border-bottom: 1px solid #f0f2f5; background: #ffffff; transition: background 0.18s ease; } ._savedItem_17j2y_651:last-child { border-bottom: 0; } ._savedItem_17j2y_651:hover { background: #fafbfc; } ._savedItemActive_17j2y_689 { background: #f5f8ff; box-shadow: inset 3px 0 0 #2563eb; } ._savedItemMain_17j2y_699 { display: flex; align-items: center; gap: 9px; min-width: 0; flex: 1; padding: 0; border: 0; background: transparent; color: inherit; text-align: left; cursor: pointer; } ._competitorAvatar_17j2y_727 { display: inline-flex; align-items: center; justify-content: center; flex: 0 0 32px; width: 32px; height: 32px; border-radius: 50%; background: #eef2ff; color: #4f46e5; font-size: 10px; font-weight: 800; letter-spacing: 0.2px; } ._savedCompetitorInfo_17j2y_757 { display: flex; flex-direction: column; min-width: 0; gap: 3px; } ._savedName_17j2y_771 { display: block; max-width: 125px; overflow: hidden; color: #273449; font-size: 12px; font-weight: 700; line-height: 1.25; text-overflow: ellipsis; white-space: nowrap; } ._savedPlatform_17j2y_795 { display: flex; align-items: center; gap: 4px; color: #94a3b8; font-size: 10px; font-weight: 500; } ._savedPlatformIcon_17j2y_813 { font-size: 11px; } ._savedItemActions_17j2y_821 { display: flex; align-items: center; gap: 4px; flex: 0 0 auto; } ._syncButton_17j2y_835, ._deleteButton_17j2y_837 { display: inline-flex; align-items: center; justify-content: center; border: 1px solid transparent; background: transparent; cursor: pointer; transition: background 0.18s ease, border-color 0.18s ease, color 0.18s ease; } ._syncButton_17j2y_835 { gap: 4px; min-height: 27px; padding: 0 7px; border-radius: 6px; color: #64748b; font-size: 10px; font-weight: 600; } ._syncButton_17j2y_835:hover:not(:disabled) { border-color: #dbe3ee; background: #f8fafc; color: #334155; } ._deleteButton_17j2y_837 { width: 28px; height: 28px; border-radius: 6px; color: #94a3b8; } ._deleteButton_17j2y_837:hover:not(:disabled) { border-color: #fee2e2; background: #fff5f5; color: #dc2626; } ._syncButton_17j2y_835:disabled, ._deleteButton_17j2y_837:disabled { opacity: 0.45; cursor: not-allowed; } /* ========================================================= FILTERS ========================================================= */ ._filters_17j2y_941 { position: relative; z-index: 10; display: flex; align-items: center; flex-wrap: wrap; gap: 8px; min-height: 40px; margin-bottom: 16px; } ._filterButton_17j2y_963 { display: inline-flex; align-items: center; justify-content: center; gap: 7px; min-height: 35px; padding: 0 11px; border: 1px solid #dfe5ec; border-radius: 7px; background: #ffffff; color: #475569; font-family: inherit; font-size: 11.5px; font-weight: 600; line-height: 1; white-space: nowrap; cursor: pointer; transition: border-color 0.18s ease, background 0.18s ease, color 0.18s ease, box-shadow 0.18s ease; } ._filterButton_17j2y_963:hover:not(:disabled) { border-color: #cbd5e1; background: #fafbfc; color: #334155; } ._filterButton_17j2y_963:disabled { opacity: 0.55; cursor: not-allowed; } ._filterButtonOpen_17j2y_1033 { border-color: #bfdbfe; background: #f8fbff; color: #2563eb; } ._chevronOpen_17j2y_1045 { transform: rotate(180deg); transition: transform 0.18s ease; } ._lastSynced_17j2y_1055 { margin-left: auto; color: #94a3b8; font-size: 10.5px; font-weight: 500; white-space: nowrap; } /* ========================================================= COMPARE DROPDOWN ========================================================= */ ._compareDropdownWrapper_17j2y_1079 { position: relative; } ._compareDropdown_17j2y_1079 { position: absolute; top: calc(100% + 7px); right: 0; z-index: 100; width: 310px; overflow: hidden; border: 1px solid #dfe5ec; border-radius: 10px; background: #ffffff; box-shadow: 0 14px 32px rgba(15, 23, 42, 0.13), 0 3px 8px rgba(15, 23, 42, 0.06); } ._compareDropdownHeader_17j2y_1117 { padding: 13px 14px; border-bottom: 1px solid #edf0f4; } ._compareDropdownHeader_17j2y_1117 > div { display: flex; flex-direction: column; gap: 3px; } ._compareDropdownHeader_17j2y_1117 strong { color: #1e293b; font-size: 12px; font-weight: 700; } ._compareDropdownHeader_17j2y_1117 span { color: #94a3b8; font-size: 10px; } ._compareCompetitorList_17j2y_1161 { max-height: 285px; overflow-y: auto; padding: 6px; } ._compareCompetitorList_17j2y_1161::-webkit-scrollbar { width: 5px; } ._compareCompetitorList_17j2y_1161::-webkit-scrollbar-track { background: transparent; } ._compareCompetitorList_17j2y_1161::-webkit-scrollbar-thumb { border-radius: 10px; background: #d7dee8; } ._compareCompetitorItem_17j2y_1199 { display: flex; align-items: center; gap: 9px; min-height: 46px; padding: 6px 8px; border: 1px solid transparent; border-radius: 7px; cursor: pointer; transition: background 0.16s ease, border-color 0.16s ease; } ._compareCompetitorItem_17j2y_1199:hover { background: #f8fafc; } ._compareCompetitorSelected_17j2y_1235 { border-color: #dbeafe; background: #f7faff; } ._compareCompetitorItem_17j2y_1199 input { position: relative; flex: 0 0 auto; width: 15px; height: 15px; margin: 0; accent-color: #2563eb; cursor: pointer; } ._compareAvatar_17j2y_1265 { display: inline-flex; align-items: center; justify-content: center; flex: 0 0 30px; width: 30px; height: 30px; border-radius: 50%; background: #f1f5f9; color: #64748b; font-size: 9px; font-weight: 800; } ._compareAvatarBlue_17j2y_1293 { background: #eaf2ff; color: #2563eb; } ._compareCompetitorInfo_17j2y_1303 { display: flex; flex-direction: column; gap: 2px; min-width: 0; flex: 1; } ._compareCompetitorInfo_17j2y_1303 strong { overflow: hidden; color: #334155; font-size: 11.5px; font-weight: 650; text-overflow: ellipsis; white-space: nowrap; } ._compareCompetitorInfo_17j2y_1303 small { color: #2563eb; font-size: 9px; font-weight: 600; } ._selectedCheck_17j2y_1349 { display: inline-flex; align-items: center; justify-content: center; flex: 0 0 20px; width: 20px; height: 20px; border-radius: 50%; background: #2563eb; color: #ffffff; } ._compareEmpty_17j2y_1373 { padding: 25px 12px; color: #94a3b8; font-size: 11px; text-align: center; } ._compareDropdownFooter_17j2y_1387 { display: flex; align-items: center; justify-content: space-between; gap: 10px; padding: 10px 12px; border-top: 1px solid #edf0f4; background: #fafbfc; } ._compareDropdownFooter_17j2y_1387 > span { color: #94a3b8; font-size: 10px; font-weight: 500; } ._compareApplyButton_17j2y_1419 { display: inline-flex; align-items: center; justify-content: center; gap: 6px; min-height: 34px; padding: 0 12px; border: 0; border-radius: 7px; background: #2563eb; color: #ffffff; font-family: inherit; font-size: 11px; font-weight: 700; cursor: pointer; transition: background 0.18s ease, opacity 0.18s ease, box-shadow 0.18s ease; } ._compareApplyButton_17j2y_1419:hover:not(:disabled) { background: #1d4ed8; box-shadow: 0 4px 10px rgba(37, 99, 235, 0.17); } ._compareApplyButton_17j2y_1419:disabled { opacity: 0.45; cursor: not-allowed; } /* ========================================================= KPI GRID ========================================================= */ ._kpiGrid_17j2y_1489 { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 12px; margin-bottom: 14px; } ._kpiCard_17j2y_371 { min-width: 0; padding: 16px; } ._kpiHeader_17j2y_1513 { display: flex; align-items: center; gap: 9px; margin-bottom: 16px; } ._kpiHeader_17j2y_1513 > span { color: #64748b; font-size: 11px; font-weight: 650; } ._kpiIcon_17j2y_1539 { display: inline-flex; align-items: center; justify-content: center; flex: 0 0 30px; width: 30px; height: 30px; border-radius: 8px; font-size: 15px; } ._kpiBlue_17j2y_1561 { background: #eaf2ff; color: #2563eb; } ._kpiGreen_17j2y_1571 { background: #e9f9ef; color: #16a34a; } ._kpiOrange_17j2y_1581 { background: #fff4e8; color: #ea580c; } ._kpiPurple_17j2y_1591 { background: #f3eefe; color: #7c3aed; } ._kpiComparison_17j2y_1601 { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 10px; } ._kpiComparison_17j2y_1601 > div { min-width: 0; } ._kpiComparison_17j2y_1601 small { display: block; max-width: 100%; margin-bottom: 5px; overflow: hidden; color: #94a3b8; font-size: 9.5px; font-weight: 500; text-overflow: ellipsis; white-space: nowrap; } ._kpiComparison_17j2y_1601 strong { display: block; overflow: hidden; color: #1e293b; font-size: 19px; font-weight: 750; line-height: 1.15; letter-spacing: -0.4px; text-overflow: ellipsis; white-space: nowrap; } ._purpleValue_17j2y_1669 { color: #7c3aed !important; } ._kpiFooter_17j2y_1677 { display: flex; align-items: center; gap: 7px; margin-top: 13px; padding-top: 10px; border-top: 1px solid #f0f2f5; } ._kpiFooter_17j2y_1677 span:first-child { color: #16a34a; font-size: 10px; font-weight: 700; } ._kpiFooter_17j2y_1677 span:last-child { color: #a0aabd; font-size: 9.5px; } /* ========================================================= MIDDLE GRID ========================================================= */ ._middleGrid_17j2y_1725 { display: grid; grid-template-columns: minmax(0, 1.45fr) minmax(300px, 0.75fr); gap: 14px; margin-bottom: 14px; } ._chartCard_17j2y_373, ._insightsCard_17j2y_375 { min-width: 0; padding: 17px; } ._sectionHeader_17j2y_1751 { display: flex; align-items: center; justify-content: space-between; gap: 12px; margin-bottom: 13px; } ._sectionHeader_17j2y_1751 h3 { margin: 0; color: #1e293b; font-size: 13px; font-weight: 700; line-height: 1.3; } /* ========================================================= LEGEND ========================================================= */ ._legend_17j2y_1791 { display: flex; align-items: center; flex-wrap: wrap; gap: 13px; margin-bottom: 11px; } ._legend_17j2y_1791 > span { display: inline-flex; align-items: center; gap: 5px; max-width: 150px; overflow: hidden; color: #64748b; font-size: 9.5px; font-weight: 500; text-overflow: ellipsis; white-space: nowrap; } ._legendDot_17j2y_1833 { display: inline-block; width: 7px; height: 7px; flex: 0 0 7px; border-radius: 50%; } ._legendBlue_17j2y_1849 { background: #2563eb; } ._legendPurple_17j2y_1857 { background: #8b5cf6; } ._legendOrange_17j2y_1865 { background: #f97316; } /* ========================================================= GROWTH CHART ========================================================= */ ._chart_17j2y_373 { position: relative; display: flex; width: 100%; height: 150px; padding: 5px 0 5px; box-sizing: border-box; } ._yLabels_17j2y_1899 { display: flex; flex-direction: column; justify-content: space-between; flex: 0 0 32px; padding: 3px 0 5px; color: #a0aabd; font-size: 8px; line-height: 1; } ._chartSvg_17j2y_1921 { display: block; width: 100%; height: 100%; min-width: 0; overflow: visible; } ._gridLine_17j2y_1937 { stroke: #edf0f4; stroke-width: 0.7; stroke-dasharray: 2 2; } ._yuaaLine_17j2y_1949, ._marketFlowLine_17j2y_1951, ._socialPilotLine_17j2y_1953 { fill: none; stroke-width: 2.2; stroke-linecap: round; stroke-linejoin: round; } ._yuaaLine_17j2y_1949 { stroke: #2563eb; } ._marketFlowLine_17j2y_1951 { stroke: #8b5cf6; } ._socialPilotLine_17j2y_1953 { stroke: #f97316; } ._chartEmpty_17j2y_1991 { display: flex; align-items: center; justify-content: center; min-height: 100px; padding: 16px; color: #94a3b8; font-size: 10.5px; text-align: center; } /* ========================================================= AI INSIGHTS ========================================================= */ ._insightList_17j2y_2021 { display: flex; flex-direction: column; gap: 8px; min-height: 100px; } ._insightItem_17j2y_2035 { display: flex; align-items: flex-start; gap: 9px; padding: 9px 10px; border: 1px solid #edf0f4; border-radius: 8px; background: #fafbfc; color: #475569; font-size: 10.5px; font-weight: 500; line-height: 1.45; } ._insightIcon_17j2y_2063 { display: inline-flex; align-items: center; justify-content: center; flex: 0 0 25px; width: 25px; height: 25px; border-radius: 7px; font-size: 12px; } ._insightGreen_17j2y_2085 { background: #e9f9ef; color: #16a34a; } ._insightOrange_17j2y_2095 { background: #fff4e8; color: #ea580c; } ._insightPurple_17j2y_2105 { background: #f3eefe; color: #7c3aed; } ._recommendButton_17j2y_2115, ._viewPosts_17j2y_2117 { display: inline-flex; align-items: center; justify-content: space-between; gap: 7px; width: 100%; min-height: 34px; margin-top: 12px; padding: 0 11px; border: 1px solid #dfe5ec; border-radius: 7px; background: #ffffff; color: #475569; font-family: inherit; font-size: 10.5px; font-weight: 650; cursor: pointer; transition: border-color 0.18s ease, background 0.18s ease, color 0.18s ease; } ._recommendButton_17j2y_2115:hover, ._viewPosts_17j2y_2117:hover { border-color: #cbd5e1; background: #f8fafc; color: #2563eb; } /* ========================================================= BOTTOM GRID ========================================================= */ ._bottomGrid_17j2y_2185 { display: grid; grid-template-columns: minmax(0, 1.4fr) minmax(320px, 0.85fr); gap: 14px; align-items: start; } ._performanceCard_17j2y_377 { min-width: 0; overflow: hidden; grid-column: 1 / -1; } ._postsCard_17j2y_379, ._formatCard_17j2y_381 { min-width: 0; } ._performanceCard_17j2y_377 ._sectionHeader_17j2y_1751, ._postsCard_17j2y_379 ._sectionHeader_17j2y_1751, ._formatCard_17j2y_381 ._sectionHeader_17j2y_1751 { padding: 16px 17px 0; } /* ========================================================= PERFORMANCE TABLE ========================================================= */ ._performanceTableWrapper_17j2y_2241 { width: 100%; overflow-x: auto; scrollbar-width: thin; } ._performanceTableWrapper_17j2y_2241::-webkit-scrollbar { height: 5px; } ._performanceTableWrapper_17j2y_2241::-webkit-scrollbar-track { background: #f8fafc; } ._performanceTableWrapper_17j2y_2241::-webkit-scrollbar-thumb { border-radius: 10px; background: #d5dce6; } ._performanceTable_17j2y_2241 { width: 100%; min-width: 750px; border-collapse: collapse; table-layout: auto; } ._performanceTable_17j2y_2241 th { height: 38px; padding: 0 12px; border-top: 1px solid #edf0f4; border-bottom: 1px solid #edf0f4; background: #fafbfc; color: #94a3b8; font-size: 9px; font-weight: 700; text-align: left; white-space: nowrap; } ._performanceTable_17j2y_2241 td { height: 49px; padding: 0 12px; border-bottom: 1px solid #f0f2f5; color: #475569; font-size: 10.5px; font-weight: 500; white-space: nowrap; } ._performanceTable_17j2y_2241 tbody tr:last-child td { border-bottom: 0; } ._performanceTable_17j2y_2241 tbody tr:hover td { background: #fafcff; } ._tableCompetitor_17j2y_2355 { display: flex; align-items: center; gap: 8px; min-width: 130px; color: #334155; font-size: 10.5px; font-weight: 650; } ._smallAvatar_17j2y_2375 { display: inline-flex; align-items: center; justify-content: center; flex: 0 0 27px; width: 27px; height: 27px; border-radius: 50%; background: #eef2ff; color: #4f46e5; font-size: 8.5px; font-weight: 800; } ._greenMetric_17j2y_2403 { color: #16a34a; font-weight: 700; } ._rankCircle_17j2y_2413 { display: inline-flex; align-items: center; justify-content: center; width: 23px; height: 23px; border-radius: 50%; font-size: 9px; font-weight: 800; } ._rankOne_17j2y_2435 { background: #fef3c7; color: #b45309; } ._rankTwo_17j2y_2445 { background: #f1f5f9; color: #64748b; } ._rankThree_17j2y_2455 { background: #fff0e4; color: #c2410c; } ._rankFour_17j2y_2465 { background: #eef2f7; color: #64748b; } ._tableNote_17j2y_2475 { padding: 10px 17px 13px; color: #a0aabd; font-size: 9px; } /* ========================================================= TOP POSTS ========================================================= */ ._postsCard_17j2y_379 { padding-bottom: 12px; } ._postsList_17j2y_2503 { display: flex; flex-direction: column; padding: 0 12px; } ._postItem_17j2y_2515 { display: grid; grid-template-columns: 43px minmax(110px, 1fr) auto; gap: 9px; align-items: center; min-width: 0; padding: 9px 5px; border-bottom: 1px solid #f0f2f5; } ._postItem_17j2y_2515:last-child { border-bottom: 0; } ._postThumbnail_17j2y_2543 { display: flex; align-items: center; justify-content: center; width: 43px; height: 43px; overflow: hidden; border-radius: 7px; background: #f1f5f9; color: #64748b; font-size: 8px; font-weight: 800; text-align: center; } ._postThumbnail_17j2y_2543 img { display: block; width: 100%; height: 100%; object-fit: cover; } ._thumbnailOne_17j2y_2587 { background: #eaf2ff; color: #2563eb; } ._thumbnailTwo_17j2y_2597 { background: #f3eefe; color: #7c3aed; } ._thumbnailThree_17j2y_2607 { background: #fff4e8; color: #ea580c; } ._postDetails_17j2y_2617 { display: flex; flex-direction: column; gap: 3px; min-width: 0; } ._postDetails_17j2y_2617 strong { display: -webkit-box; overflow: hidden; color: #334155; font-size: 10.5px; font-weight: 650; line-height: 1.35; -webkit-box-orient: vertical; -webkit-line-clamp: 2; } ._postDetails_17j2y_2617 small { color: #a0aabd; font-size: 8.5px; } ._postStats_17j2y_2663 { display: flex; align-items: center; gap: 9px; } ._postStats_17j2y_2663 > span { display: flex; flex-direction: column; align-items: flex-end; gap: 2px; min-width: 35px; color: #475569; font-size: 9.5px; font-weight: 700; } ._postStats_17j2y_2663 small { color: #a0aabd; font-size: 7.5px; font-weight: 500; } ._postRate_17j2y_2709 { color: #16a34a !important; } ._viewPosts_17j2y_2117 { width: calc(100% - 34px); margin: 9px 17px 0; } /* ========================================================= FORMAT CARD ========================================================= */ ._formatCard_17j2y_381 { padding: 16px 17px; } ._formatSection_17j2y_2743 { padding-bottom: 16px; border-bottom: 1px solid #edf0f4; } ._postingSection_17j2y_2753 { padding-top: 15px; } ._formatTitle_17j2y_2761 { display: flex; align-items: center; gap: 5px; margin-bottom: 13px; color: #334155; font-size: 11px; font-weight: 700; } ._formatTitle_17j2y_2761 svg { color: #94a3b8; } ._formatRow_17j2y_2789 { display: grid; grid-template-columns: 62px minmax(80px, 1fr) 35px; gap: 8px; align-items: center; margin-bottom: 11px; } ._formatRow_17j2y_2789:last-child { margin-bottom: 0; } ._formatRow_17j2y_2789 > span { overflow: hidden; color: #64748b; font-size: 9.5px; font-weight: 500; text-overflow: ellipsis; white-space: nowrap; } ._formatRow_17j2y_2789 strong { color: #475569; font-size: 9.5px; font-weight: 700; text-align: right; } ._formatBar_17j2y_2845 { height: 6px; overflow: hidden; border-radius: 999px; background: #edf1f5; } ._formatFill_17j2y_2859 { height: 100%; min-width: 0; border-radius: inherit; transition: width 0.3s ease; } ._reelsFill_17j2y_2873 { background: #8b5cf6; } ._postingApiList_17j2y_2881 { display: flex; flex-direction: column; gap: 7px; } ._postingApiItem_17j2y_2893 { display: flex; align-items: center; min-height: 31px; padding: 0 9px; border: 1px solid #edf0f4; border-radius: 7px; background: #fafbfc; color: #64748b; font-size: 9.5px; font-weight: 550; } /* ========================================================= LOADING / EMPTY STATES ========================================================= */ ._loadingState_17j2y_2927 { display: flex; align-items: center; justify-content: center; gap: 8px; min-height: 80px; padding: 15px; color: #94a3b8; font-size: 10.5px; text-align: center; } ._emptyState_17j2y_2951 { padding: 24px 14px; color: #a0aabd; font-size: 10.5px; text-align: center; } ._apiEmptyState_17j2y_2965 { display: flex; flex-direction: column; align-items: center; justify-content: center; min-height: 310px; padding: 35px; border: 1px dashed #dce3ec; border-radius: 12px; background: #ffffff; color: #94a3b8; text-align: center; } ._apiEmptyState_17j2y_2965 svg { margin-bottom: 10px; color: #94a3b8; } ._apiEmptyState_17j2y_2965 h3 { margin: 0 0 6px; color: #334155; font-size: 14px; font-weight: 700; } ._apiEmptyState_17j2y_2965 p { max-width: 320px; margin: 0; color: #94a3b8; font-size: 11px; line-height: 1.5; } /* ========================================================= ALERT ========================================================= */ ._competitorAlert_17j2y_3041 { display: flex; align-items: center; gap: 10px; margin: 12px 0 16px; padding: 10px 12px; border: 1px solid #fed7aa; border-radius: 8px; background: #fffaf5; color: #9a3412; } ._alertIcon_17j2y_3065 { display: inline-flex; align-items: center; justify-content: center; flex: 0 0 26px; width: 26px; height: 26px; border-radius: 7px; background: #ffedd5; color: #ea580c; } ._alertContent_17j2y_3089 { flex: 1; min-width: 0; font-size: 11px; line-height: 1.4; } ._alertClose_17j2y_3103 { display: inline-flex; align-items: center; justify-content: center; width: 25px; height: 25px; padding: 0; border: 0; border-radius: 5px; background: transparent; color: #9a3412; font-size: 17px; cursor: pointer; } ._alertClose_17j2y_3103:hover { background: #ffedd5; } /* ========================================================= SPINNER ========================================================= */ ._spin_17j2y_3149 { animation: _competitorSpin_17j2y_1 0.9s linear infinite; } @keyframes _competitorSpin_17j2y_1 { from { transform: rotate(0deg); } to { transform: rotate(360deg); } } /* ========================================================= TABLET ========================================================= */ @media (max-width: 1200px) { ._contentGrid_17j2y_323 { grid-template-columns: 245px minmax(0, 1fr); gap: 15px; } ._kpiGrid_17j2y_1489 { grid-template-columns: repeat(2, minmax(0, 1fr)); } ._middleGrid_17j2y_1725 { grid-template-columns: minmax(0, 1fr); } ._insightsCard_17j2y_375 { min-height: auto; } ._bottomGrid_17j2y_2185 { grid-template-columns: minmax(0, 1fr); } ._performanceCard_17j2y_377 { grid-column: auto; } } /* ========================================================= SMALL TABLET ========================================================= */ @media (max-width: 900px) { ._topControls_17j2y_43 { align-items: stretch; flex-direction: column; } ._platformTabs_17j2y_63 { width: 100%; overflow-x: auto; } ._platformTab_17j2y_63 { flex: 0 0 auto; } ._pageSelector_17j2y_237 { width: fit-content; max-width: 100%; } ._contentGrid_17j2y_323 { grid-template-columns: 1fr; } ._sidebar_17j2y_337 { display: grid; grid-template-columns: minmax(250px, 0.8fr) minmax(0, 1.2fr); align-items: start; } ._savedCard_17j2y_369 { min-width: 0; } ._lastSynced_17j2y_1055 { width: 100%; margin-left: 0; } } /* ========================================================= MOBILE ========================================================= */ @media (max-width: 640px) { ._page_17j2y_17 { padding-bottom: 20px; } ._topControls_17j2y_43 { margin-top: 15px; margin-bottom: 14px; gap: 10px; } ._platformTabs_17j2y_63 { border-radius: 8px; } ._platformTab_17j2y_63 { min-height: 35px; padding: 0 11px; font-size: 11px; } ._platformLoading_17j2y_157 { min-height: 35px; font-size: 11px; } ._pageSelector_17j2y_237 { width: 100%; max-width: none; min-height: 37px; } ._sidebar_17j2y_337 { display: flex; } ._addCard_17j2y_367 { padding: 15px; } ._savedCard_17j2y_369 { width: 100%; } ._savedName_17j2y_771 { max-width: 180px; } ._filters_17j2y_941 { align-items: stretch; gap: 6px; } ._filterButton_17j2y_963, ._compareApplyButton_17j2y_1419 { min-height: 34px; } ._filters_17j2y_941 > ._filterButton_17j2y_963, ._compareDropdownWrapper_17j2y_1079, ._filters_17j2y_941 > ._compareApplyButton_17j2y_1419 { flex: 1 1 auto; } ._compareDropdownWrapper_17j2y_1079 ._filterButton_17j2y_963 { width: 100%; } ._lastSynced_17j2y_1055 { padding-top: 2px; font-size: 9.5px; } ._kpiGrid_17j2y_1489 { grid-template-columns: 1fr; gap: 9px; } ._kpiCard_17j2y_371 { padding: 14px; } ._kpiComparison_17j2y_1601 strong { font-size: 18px; } ._middleGrid_17j2y_1725 { gap: 10px; } ._chartCard_17j2y_373, ._insightsCard_17j2y_375, ._formatCard_17j2y_381 { padding: 14px; } ._chart_17j2y_373 { height: 135px; } ._bottomGrid_17j2y_2185 { gap: 10px; } ._performanceCard_17j2y_377 ._sectionHeader_17j2y_1751, ._postsCard_17j2y_379 ._sectionHeader_17j2y_1751 { padding: 14px 14px 0; } ._postItem_17j2y_2515 { grid-template-columns: 40px minmax(0, 1fr); gap: 8px; } ._postThumbnail_17j2y_2543 { width: 40px; height: 40px; } ._postStats_17j2y_2663 { grid-column: 1 / -1; justify-content: flex-start; padding-left: 48px; } ._postStats_17j2y_2663 > span { align-items: flex-start; } ._viewPosts_17j2y_2117 { width: calc(100% - 28px); margin: 8px 14px 0; } ._formatRow_17j2y_2789 { grid-template-columns: 60px minmax(0, 1fr) 35px; } ._compareDropdown_17j2y_1079 { position: fixed; top: auto; right: 12px; left: 12px; width: auto; max-width: none; } } /* ========================================================= VERY SMALL MOBILE ========================================================= */ @media (max-width: 420px) { ._platformTabs_17j2y_63 { gap: 3px; padding: 3px; } ._platformTab_17j2y_63 { padding: 0 9px; gap: 5px; font-size: 10px; } ._platformTab_17j2y_63 svg { font-size: 14px; } ._savedItem_17j2y_651 { padding: 9px; } ._savedName_17j2y_771 { max-width: 130px; } ._syncButton_17j2y_835 { width: 28px; padding: 0; } ._syncButton_17j2y_835 span { display: none; } ._deleteButton_17j2y_837 { width: 27px; } ._kpiComparison_17j2y_1601 { gap: 7px; } ._kpiComparison_17j2y_1601 strong { font-size: 16px; } ._legend_17j2y_1791 { gap: 8px; } ._legend_17j2y_1791 > span { max-width: 105px; } ._insightItem_17j2y_2035 { padding: 8px; font-size: 10px; } ._postStats_17j2y_2663 { gap: 7px; padding-left: 48px; } ._postStats_17j2y_2663 > span { min-width: 30px; } } /* ========================================================= ACCESSIBILITY ========================================================= */ ._platformTab_17j2y_63:focus-visible, ._pageSelector_17j2y_237:focus-visible, ._filterButton_17j2y_963:focus-visible, ._fetchButton_17j2y_525:focus-visible, ._syncButton_17j2y_835:focus-visible, ._deleteButton_17j2y_837:focus-visible, ._compareApplyButton_17j2y_1419:focus-visible, ._recommendButton_17j2y_2115:focus-visible, ._viewPosts_17j2y_2117:focus-visible, ._savedItemMain_17j2y_699:focus-visible, ._alertClose_17j2y_3103:focus-visible { outline: 2px solid #93c5fd; outline-offset: 2px; } /* ========================================================= REDUCED MOTION ========================================================= */ @media (prefers-reduced-motion: reduce) { ._spin_17j2y_3149 { animation: none; } ._platformTab_17j2y_63, ._pageSelector_17j2y_237, ._input_17j2y_457, ._fetchButton_17j2y_525, ._savedItem_17j2y_651, ._syncButton_17j2y_835, ._deleteButton_17j2y_837, ._filterButton_17j2y_963, ._compareCompetitorItem_17j2y_1199, ._recommendButton_17j2y_2115, ._viewPosts_17j2y_2117, ._formatFill_17j2y_2859 { transition: none; } } /* ========================================================= CompetitorCompare.module.css ========================================================= */ ._compareOverlay_9ovzx_9 { position: fixed; inset: 0; z-index: 1000; display: flex; align-items: center; justify-content: center; padding: 24px; background: rgba(15, 23, 42, 0.52); backdrop-filter: blur(3px); box-sizing: border-box; } /* --------------------------------------------------------- Modal --------------------------------------------------------- */ ._compareModal_9ovzx_43 { display: flex; flex-direction: column; width: min(1050px, 100%); max-height: min(90vh, 900px); overflow: hidden; border: 1px solid #e2e8f0; border-radius: 16px; background: #ffffff; box-shadow: 0 25px 50px -12px rgba(15, 23, 42, 0.25), 0 8px 20px rgba(15, 23, 42, 0.08); } /* --------------------------------------------------------- Header --------------------------------------------------------- */ ._compareModalHeader_9ovzx_79 { display: flex; align-items: center; justify-content: space-between; gap: 16px; padding: 18px 20px; border-bottom: 1px solid #e2e8f0; background: #ffffff; } ._compareModalTitleArea_9ovzx_99 { display: flex; align-items: center; gap: 12px; min-width: 0; } ._compareModalIcon_9ovzx_113 { display: flex; align-items: center; justify-content: center; width: 40px; height: 40px; flex: 0 0 40px; border-radius: 10px; background: #eff6ff; color: #2563eb; } ._compareModalTitleArea_9ovzx_99 h2 { margin: 0; color: #0f172a; font-size: 17px; font-weight: 700; line-height: 1.3; } ._compareModalMeta_9ovzx_153 { display: flex; align-items: center; gap: 7px; margin-top: 4px; color: #94a3b8; font-size: 10px; } ._compareModalMeta_9ovzx_153 span:first-child { color: #64748b; font-weight: 600; } ._compareCloseButton_9ovzx_181 { display: flex; align-items: center; justify-content: center; width: 34px; height: 34px; flex: 0 0 34px; padding: 0; border: 1px solid transparent; border-radius: 8px; background: transparent; color: #64748b; cursor: pointer; transition: background 0.2s ease, color 0.2s ease, border-color 0.2s ease; } ._compareCloseButton_9ovzx_181:hover { border-color: #e2e8f0; background: #f8fafc; color: #0f172a; } /* --------------------------------------------------------- Body --------------------------------------------------------- */ ._compareModalBody_9ovzx_239 { flex: 1; min-height: 0; overflow-y: auto; padding: 20px; background: #f8fafc; } ._compareModalBody_9ovzx_239::-webkit-scrollbar { width: 6px; } ._compareModalBody_9ovzx_239::-webkit-scrollbar-track { background: transparent; } ._compareModalBody_9ovzx_239::-webkit-scrollbar-thumb { border-radius: 10px; background: #cbd5e1; } /* --------------------------------------------------------- Loading --------------------------------------------------------- */ ._compareLoading_9ovzx_289 { display: flex; flex-direction: column; align-items: center; justify-content: center; min-height: 380px; text-align: center; } ._compareLoading_9ovzx_289 svg { margin-bottom: 14px; color: #2563eb; } ._compareLoading_9ovzx_289 strong { color: #0f172a; font-size: 14px; } ._compareLoading_9ovzx_289 span { margin-top: 5px; color: #94a3b8; font-size: 11px; } /* --------------------------------------------------------- Empty --------------------------------------------------------- */ ._compareEmpty_9ovzx_347 { display: flex; flex-direction: column; align-items: center; justify-content: center; min-height: 380px; text-align: center; } ._compareEmpty_9ovzx_347 svg { margin-bottom: 14px; color: #94a3b8; } ._compareEmpty_9ovzx_347 strong { color: #0f172a; font-size: 14px; } ._compareEmpty_9ovzx_347 span { margin-top: 5px; color: #94a3b8; font-size: 11px; } /* --------------------------------------------------------- Period --------------------------------------------------------- */ ._comparePeriod_9ovzx_405 { display: flex; align-items: center; gap: 12px; margin-bottom: 14px; padding: 13px 15px; border: 1px solid #dbeafe; border-radius: 10px; background: #ffffff; } ._comparePeriodIcon_9ovzx_427 { display: flex; align-items: center; justify-content: center; width: 34px; height: 34px; flex: 0 0 34px; border-radius: 8px; background: #eff6ff; color: #2563eb; } ._comparePeriod_9ovzx_405 > div:last-child { display: flex; flex-direction: column; gap: 3px; } ._comparePeriod_9ovzx_405 span { color: #94a3b8; font-size: 10px; } ._comparePeriod_9ovzx_405 strong { color: #334155; font-size: 12px; font-weight: 650; } /* --------------------------------------------------------- Score --------------------------------------------------------- */ ._compareScoreCard_9ovzx_493 { display: flex; align-items: center; justify-content: space-between; gap: 20px; margin-bottom: 20px; padding: 17px 18px; border: 1px solid #dcfce7; border-radius: 11px; background: #f0fdf4; } ._compareScoreCard_9ovzx_493 > div:first-child { display: flex; flex-direction: column; gap: 4px; } ._compareScoreLabel_9ovzx_529 { color: #64748b; font-size: 10px; font-weight: 600; } ._compareScore_9ovzx_493 { color: #15803d; font-size: 27px; font-weight: 750; line-height: 1; } ._compareScoreRight_9ovzx_555 { display: flex; align-items: center; gap: 7px; color: #16a34a; font-size: 10px; font-weight: 600; } /* --------------------------------------------------------- Sections --------------------------------------------------------- */ ._compareSection_9ovzx_581 { margin-bottom: 18px; padding: 17px; border: 1px solid #e2e8f0; border-radius: 12px; background: #ffffff; } ._compareSection_9ovzx_581:last-child { margin-bottom: 0; } ._compareSectionHeader_9ovzx_605 { display: flex; align-items: center; justify-content: space-between; margin-bottom: 14px; } ._compareSectionHeader_9ovzx_605 h3 { margin: 0; color: #0f172a; font-size: 14px; font-weight: 700; } ._compareSectionHeader_9ovzx_605 span { display: block; margin-top: 3px; color: #94a3b8; font-size: 10px; } /* --------------------------------------------------------- Metric cards --------------------------------------------------------- */ ._compareMetricsGrid_9ovzx_655 { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 10px; } ._compareMetricCard_9ovzx_667 { display: flex; align-items: center; gap: 10px; min-width: 0; padding: 12px; border: 1px solid #eef2f7; border-radius: 9px; background: #f8fafc; } ._compareMetricIcon_9ovzx_689 { display: flex; align-items: center; justify-content: center; width: 32px; height: 32px; flex: 0 0 32px; border-radius: 8px; background: #ffffff; color: #2563eb; box-shadow: 0 1px 2px rgba(15, 23, 42, 0.04); } ._compareMetricContent_9ovzx_715 { display: flex; flex-direction: column; gap: 2px; min-width: 0; } ._compareMetricLabel_9ovzx_729 { overflow: hidden; color: #64748b; font-size: 10px; line-height: 1.3; text-overflow: ellipsis; white-space: nowrap; } ._compareMetricValue_9ovzx_747 { color: #0f172a; font-size: 16px; font-weight: 700; line-height: 1.2; } ._compareMetricSubtitle_9ovzx_761 { color: #94a3b8; font-size: 9px; } /* --------------------------------------------------------- Competitors --------------------------------------------------------- */ ._compareCompetitorList_9ovzx_779 { display: flex; flex-direction: column; gap: 10px; } ._compareCompetitorCard_9ovzx_791 { padding: 13px; border: 1px solid #e2e8f0; border-radius: 10px; background: #ffffff; } ._compareCompetitorTop_9ovzx_805 { display: flex; align-items: center; gap: 10px; margin-bottom: 13px; } ._compareCompetitorAvatar_9ovzx_819 { display: flex; align-items: center; justify-content: center; width: 34px; height: 34px; flex: 0 0 34px; border-radius: 9px; background: #f1f5f9; color: #475569; font-size: 12px; font-weight: 700; } ._compareCompetitorTop_9ovzx_805 > div:nth-child(2) { display: flex; flex-direction: column; gap: 2px; min-width: 0; flex: 1; } ._compareCompetitorTop_9ovzx_805 strong { overflow: hidden; color: #0f172a; font-size: 12px; font-weight: 650; text-overflow: ellipsis; white-space: nowrap; } ._compareCompetitorTop_9ovzx_805 span { color: #94a3b8; font-size: 10px; } ._comparePlatformBadge_9ovzx_891 { display: inline-flex; align-items: center; gap: 5px; padding: 5px 7px; border-radius: 6px; background: #f8fafc; color: #64748b; font-size: 9px; font-weight: 650; white-space: nowrap; } ._comparePlatformBadge_9ovzx_891 svg { color: #e11d48; } ._compareCompetitorMetrics_9ovzx_925 { display: grid; grid-template-columns: repeat(5, minmax(0, 1fr)); gap: 8px; padding-top: 11px; border-top: 1px solid #f1f5f9; } ._compareCompetitorMetrics_9ovzx_925 > div { display: flex; flex-direction: column; gap: 3px; min-width: 0; } ._compareCompetitorMetrics_9ovzx_925 span { color: #94a3b8; font-size: 9px; } ._compareCompetitorMetrics_9ovzx_925 strong { color: #334155; font-size: 12px; font-weight: 650; } /* --------------------------------------------------------- No competitor / no data --------------------------------------------------------- */ ._compareNoCompetitors_9ovzx_985, ._compareNoData_9ovzx_987 { padding: 18px; border: 1px dashed #cbd5e1; border-radius: 9px; background: #f8fafc; color: #94a3b8; font-size: 11px; text-align: center; } /* --------------------------------------------------------- Tags --------------------------------------------------------- */ ._compareTags_9ovzx_1015 { display: flex; flex-wrap: wrap; gap: 7px; } ._compareTag_9ovzx_1015 { display: inline-flex; align-items: center; gap: 5px; padding: 7px 9px; border: 1px solid #dbeafe; border-radius: 7px; background: #eff6ff; color: #2563eb; font-size: 10px; font-weight: 600; } ._compareTag_9ovzx_1015 svg { flex: 0 0 auto; } /* --------------------------------------------------------- Content mix --------------------------------------------------------- */ ._compareContentMix_9ovzx_1069 { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 10px; } ._compareContentMixItem_9ovzx_1081 { display: flex; align-items: center; gap: 10px; padding: 12px; border: 1px solid #eef2f7; border-radius: 9px; background: #f8fafc; color: #2563eb; } ._compareContentMixItem_9ovzx_1081 > div { display: flex; flex-direction: column; gap: 3px; } ._compareContentMixItem_9ovzx_1081 span { color: #64748b; font-size: 10px; } ._compareContentMixItem_9ovzx_1081 strong { color: #0f172a; font-size: 14px; } /* --------------------------------------------------------- Gaps --------------------------------------------------------- */ ._compareGapList_9ovzx_1143 { display: flex; flex-direction: column; gap: 7px; } ._compareGapItem_9ovzx_1155 { position: relative; padding: 10px 12px 10px 28px; border: 1px solid #fee2e2; border-radius: 8px; background: #fef2f2; color: #475569; font-size: 11px; line-height: 1.5; } ._compareGapItem_9ovzx_1155::before { position: absolute; top: 15px; left: 13px; width: 5px; height: 5px; border-radius: 50%; background: #ef4444; content: ""; } /* --------------------------------------------------------- Footer --------------------------------------------------------- */ ._compareModalFooter_9ovzx_1207 { display: flex; align-items: center; justify-content: flex-end; gap: 9px; padding: 13px 20px; border-top: 1px solid #e2e8f0; background: #ffffff; } ._generateReportButton_9ovzx_1227, ._compareCancelButton_9ovzx_1229 { display: inline-flex; align-items: center; justify-content: center; gap: 7px; min-height: 35px; padding: 8px 13px; border-radius: 8px; font-size: 11px; font-weight: 650; cursor: pointer; transition: background 0.2s ease, border-color 0.2s ease, color 0.2s ease, transform 0.15s ease; } ._generateReportButton_9ovzx_1227 { border: 1px solid #2563eb; background: #2563eb; color: #ffffff; } ._generateReportButton_9ovzx_1227:hover:not(:disabled) { background: #1d4ed8; border-color: #1d4ed8; } ._generateReportButton_9ovzx_1227:active:not(:disabled), ._compareCancelButton_9ovzx_1229:active { transform: translateY(1px); } ._generateReportButton_9ovzx_1227:disabled { opacity: 0.65; cursor: not-allowed; } ._compareCancelButton_9ovzx_1229 { border: 1px solid #e2e8f0; background: #ffffff; color: #475569; } ._compareCancelButton_9ovzx_1229:hover { background: #f8fafc; border-color: #cbd5e1; color: #0f172a; } /* --------------------------------------------------------- Generated message --------------------------------------------------------- */ ._reportGeneratedMessage_9ovzx_1339 { display: flex; align-items: center; gap: 7px; margin-right: auto; color: #16a34a; font-size: 11px; font-weight: 600; } ._reportGeneratedMessage_9ovzx_1339 svg { flex: 0 0 auto; } /* --------------------------------------------------------- Responsive --------------------------------------------------------- */ @media (max-width: 800px) { ._compareOverlay_9ovzx_9 { padding: 12px; } ._compareModal_9ovzx_43 { max-height: 94vh; } ._compareMetricsGrid_9ovzx_655 { grid-template-columns: repeat(2, minmax(0, 1fr)); } ._compareCompetitorMetrics_9ovzx_925 { grid-template-columns: repeat(3, minmax(0, 1fr)); } } @media (max-width: 600px) { ._compareOverlay_9ovzx_9 { align-items: flex-end; padding: 0; } ._compareModal_9ovzx_43 { width: 100%; max-height: 96vh; border-radius: 16px 16px 0 0; border-bottom: 0; } ._compareModalHeader_9ovzx_79 { padding: 14px 16px; } ._compareModalBody_9ovzx_239 { padding: 14px; } ._compareModalFooter_9ovzx_1207 { padding: 11px 14px; } ._compareScoreCard_9ovzx_493 { align-items: flex-start; flex-direction: column; gap: 10px; } ._compareScoreRight_9ovzx_555 { align-self: flex-start; } ._compareContentMix_9ovzx_1069 { grid-template-columns: 1fr; } } @media (max-width: 450px) { ._compareMetricsGrid_9ovzx_655 { grid-template-columns: 1fr; } ._compareCompetitorMetrics_9ovzx_925 { grid-template-columns: repeat(2, minmax(0, 1fr)); } ._compareModalFooter_9ovzx_1207 { flex-wrap: wrap; } ._reportGeneratedMessage_9ovzx_1339 { width: 100%; margin-right: 0; margin-bottom: 2px; } ._generateReportButton_9ovzx_1227, ._compareCancelButton_9ovzx_1229 { flex: 1; } } ._overlay_13ex2_1 { position: fixed; inset: 0; z-index: 9999; display: flex; align-items: center; justify-content: center; padding: 24px; background: rgba(15, 23, 42, 0.5); backdrop-filter: blur(2px); } ._modal_13ex2_31 { width: min(940px, 96vw); max-height: 94vh; display: flex; flex-direction: column; overflow: hidden; background: #ffffff; border: 1px solid #dbe3ef; border-radius: 16px; box-shadow: 0 24px 70px rgba(15, 23, 42, 0.2); } ._header_13ex2_65 { display: flex; align-items: flex-start; justify-content: space-between; gap: 20px; padding: 22px 26px 16px; border-bottom: 1px solid #e6ebf3; } ._headerLeft_13ex2_89, ._headerRight_13ex2_91, ._masterStatus_13ex2_93, ._channelEnableLeft_13ex2_95, ._ruleItem_13ex2_97 { display: flex; align-items: center; } ._headerLeft_13ex2_89 { gap: 14px; } ._headerLeft_13ex2_89 h2 { margin: 0; color: #0f1f46; font-size: 24px; font-weight: 700; } ._headerLeft_13ex2_89 p { margin: 4px 0 0; color: #64748b; font-size: 13px; } ._aiIcon_13ex2_149 { width: 42px; height: 42px; display: inline-flex; align-items: center; justify-content: center; flex-shrink: 0; border-radius: 50%; background: #f2eaff; color: #7c3aed; font-size: 23px; } ._headerRight_13ex2_91 { gap: 18px; } ._masterStatus_13ex2_93 { gap: 10px; color: #16a34a; font-size: 12px; } ._closeButton_13ex2_209 { width: 34px; height: 34px; display: inline-flex; align-items: center; justify-content: center; border: 0; border-radius: 8px; background: #f8fafc; color: #64748b; cursor: pointer; font-size: 19px; } ._switch_13ex2_247 { width: 40px; height: 22px; position: relative; padding: 0; border: 0; border-radius: 999px; background: #cbd5e1; cursor: pointer; transition: 0.2s ease; } ._switch_13ex2_247 span { width: 18px; height: 18px; position: absolute; top: 2px; left: 2px; border-radius: 50%; background: #ffffff; box-shadow: 0 1px 3px rgba(15, 23, 42, 0.2); transition: 0.2s ease; } ._switchActive_13ex2_317 { background: #16a34a; } ._switchActive_13ex2_317 span { transform: translateX(18px); } ._channelTabs_13ex2_333 { display: flex; padding: 0 26px; border-bottom: 1px solid #e6ebf3; } ._channelTab_13ex2_333 { min-width: 200px; display: flex; align-items: center; gap: 10px; padding: 14px 16px; border: 0; border-right: 1px solid #e6ebf3; border-bottom: 2px solid transparent; background: transparent; color: #334155; cursor: pointer; } ._channelTab_13ex2_333:first-child { border-left: 1px solid #e6ebf3; } ._channelTabActive_13ex2_397 { border-bottom-color: #0866ff; background: #fbfdff; } ._channelIcon_13ex2_409, ._largeChannelIcon_13ex2_411 { display: inline-flex; align-items: center; justify-content: center; flex-shrink: 0; border-radius: 50%; color: #ffffff; } ._channelIcon_13ex2_409 { width: 26px; height: 26px; font-size: 13px; } ._largeChannelIcon_13ex2_411 { width: 38px; height: 38px; font-size: 18px; } ._facebook_13ex2_463 { background: #1877f2; } ._instagram_13ex2_471 { background: linear-gradient(135deg, #833ab4, #fd1d1d, #fcb045); } ._sms_13ex2_479 { background: #14b8a6; } ._channelTab_13ex2_333 strong { font-size: 14px; font-weight: 600; } ._channelTab_13ex2_333 small { margin-left: auto; padding: 2px 8px; border-radius: 999px; font-size: 11px; font-weight: 600; } ._statusOn_13ex2_519 { background: #eff6ff; color: #0866ff; } ._statusOff_13ex2_529 { background: #f1f5f9; color: #64748b; } ._content_13ex2_539 { flex: 1; overflow-y: auto; padding: 18px 26px 22px; } ._channelEnableCard_13ex2_555 { display: flex; align-items: center; justify-content: space-between; gap: 20px; padding: 14px 16px; border: 1px solid #bfdbfe; border-radius: 9px; background: #eff6ff; } ._channelEnableLeft_13ex2_95 { gap: 12px; } ._channelEnableLeft_13ex2_95 strong { display: block; color: #172554; font-size: 13px; } ._channelEnableLeft_13ex2_95 p { margin: 3px 0 0; color: #64748b; font-size: 12px; } ._section_13ex2_625 { margin-top: 18px; } ._section_13ex2_625 h3 { margin: 0 0 10px; color: #172554; font-size: 14px; font-weight: 700; } ._replyModeGrid_13ex2_651 { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 18px; } ._replyModeCard_13ex2_665 { min-height: 90px; display: grid; grid-template-columns: auto auto 1fr; align-items: flex-start; gap: 12px; padding: 16px; text-align: left; border: 1px solid #dbe3ef; border-radius: 8px; background: #ffffff; cursor: pointer; } ._replyModeActive_13ex2_707 { border-color: #0866ff; box-shadow: 0 0 0 1px #0866ff; } ._radioOuter_13ex2_719 { width: 16px; height: 16px; display: inline-flex; align-items: center; justify-content: center; margin-top: 3px; border: 1.5px solid #94a3b8; border-radius: 50%; } ._replyModeActive_13ex2_707 ._radioOuter_13ex2_719 { border-color: #0866ff; } ._radioOuter_13ex2_719 i { width: 8px; height: 8px; border-radius: 50%; background: #0866ff; } ._modeIcon_13ex2_773 { color: #6d28d9; font-size: 25px; } ._replyModeCard_13ex2_665 strong { display: block; color: #172554; font-size: 13px; } ._replyModeCard_13ex2_665 small { display: block; margin-top: 4px; color: #64748b; font-size: 12px; line-height: 1.45; } ._labelRow_13ex2_823 label, ._field_13ex2_825 label, ._confidenceField_13ex2_827 label { display: block; margin-bottom: 7px; color: #334155; font-size: 12px; font-weight: 600; } ._textarea_13ex2_849 { width: 100%; resize: vertical; padding: 12px 14px; border: 1px solid #cbd5e1; border-radius: 7px; outline: none; color: #172554; font: inherit; font-size: 13px; line-height: 1.5; } ._textarea_13ex2_849:focus { border-color: #0866ff; box-shadow: 0 0 0 2px rgba(8, 102, 255, 0.08); } ._textareaFooter_13ex2_899 { display: flex; align-items: center; justify-content: space-between; margin-top: 6px; color: #64748b; font-size: 11px; } ._textareaFooter_13ex2_899 button { border: 0; background: transparent; color: #0866ff; cursor: pointer; font-size: 11px; } ._threeColumnGrid_13ex2_945 { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 20px; margin-top: 18px; } ._field_13ex2_825 select, ._field_13ex2_825 input, ._confidenceField_13ex2_827 select { width: 100%; height: 40px; padding: 0 12px; border: 1px solid #d5deeb; border-radius: 7px; background: #ffffff; color: #334155; outline: none; font-size: 12px; } ._rulesCard_13ex2_1001 { display: grid; grid-template-columns: 1fr 260px; gap: 30px; margin-top: 18px; padding: 14px 16px; border: 1px solid #dbe3ef; border-radius: 8px; background: #fbfdff; } ._rulesLeft_13ex2_1031 { display: flex; flex-direction: column; gap: 12px; } ._ruleItem_13ex2_97 { gap: 12px; } ._ruleItem_13ex2_97 strong { display: block; color: #172554; font-size: 12px; } ._ruleItem_13ex2_97 p { margin: 2px 0 0; color: #64748b; font-size: 11px; } ._confidenceField_13ex2_827 { align-self: end; } ._testSection_13ex2_1093 { padding-top: 4px; } ._testHeader_13ex2_1101 { display: flex; align-items: center; justify-content: space-between; margin-bottom: 10px; } ._previewButton_13ex2_1117 { display: inline-flex; align-items: center; gap: 6px; padding: 8px 12px; border: 1px solid #0866ff; border-radius: 6px; background: #ffffff; color: #0866ff; cursor: pointer; font-size: 11px; font-weight: 600; } ._testGrid_13ex2_1155 { display: grid; grid-template-columns: 1fr 32px 1.5fr; align-items: end; gap: 12px; } ._testArrow_13ex2_1171 { height: 40px; display: inline-flex; align-items: center; justify-content: center; color: #64748b; transform: rotate(-90deg); } ._previewBox_13ex2_1195 { min-height: 40px; padding: 10px 12px; border-radius: 7px; background: #eef4ff; color: #172554; font-size: 12px; line-height: 1.4; } ._footer_13ex2_1223 { display: flex; align-items: center; justify-content: space-between; gap: 20px; padding: 14px 26px; border-top: 1px solid #e6ebf3; background: #ffffff; } ._footer_13ex2_1223 p { margin: 0; color: #64748b; font-size: 11px; } ._footer_13ex2_1223 p strong { color: #0866ff; } ._footerActions_13ex2_1275 { display: flex; gap: 10px; } ._cancelButton_13ex2_1287, ._saveButton_13ex2_1289 { min-height: 40px; display: inline-flex; align-items: center; justify-content: center; gap: 7px; padding: 0 18px; border-radius: 7px; cursor: pointer; font-size: 12px; font-weight: 600; } ._cancelButton_13ex2_1287 { border: 1px solid #d5deeb; background: #ffffff; color: #334155; } ._saveButton_13ex2_1289 { border: 1px solid #0866ff; background: #0866ff; color: #ffffff; } @media (max-width: 900px) { ._channelTabs_13ex2_333 { overflow-x: auto; } ._channelTab_13ex2_333 { min-width: 170px; } ._replyModeGrid_13ex2_651, ._threeColumnGrid_13ex2_945 { grid-template-columns: 1fr; } ._rulesCard_13ex2_1001 { grid-template-columns: 1fr; } ._testGrid_13ex2_1155 { grid-template-columns: 1fr; } ._testArrow_13ex2_1171 { display: none; } } @media (max-width: 640px) { ._overlay_13ex2_1 { padding: 10px; } ._modal_13ex2_31 { width: 100%; max-height: 96vh; } ._header_13ex2_65 { padding: 16px; } ._headerRight_13ex2_91 { gap: 8px; } ._masterStatus_13ex2_93 > span:first-child { display: none; } ._content_13ex2_539 { padding: 14px 16px; } ._footer_13ex2_1223 { padding: 12px 16px; flex-direction: column; align-items: stretch; } ._footerActions_13ex2_1275 { justify-content: flex-end; } } ._channelTabs_o7jdu_1 { display: flex; align-items: center; gap: var(--space-2); margin-bottom: var(--space-4); padding: 0 var(--space-2); overflow-x: auto; border-bottom: 1px solid var(--border-light); } ._channelTab_o7jdu_1 { position: relative; min-height: 42px; padding: 0 var(--space-2); display: inline-flex; align-items: center; gap: 6px; flex-shrink: 0; border: 0; background: transparent; color: var(--text-secondary); font-size: var(--font-size-xs); font-weight: var(--font-weight-medium); cursor: pointer; } ._channelTab_o7jdu_1::after { content: ""; position: absolute; right: var(--space-2); bottom: -1px; left: var(--space-2); height: 2px; border-radius: var(--radius-full); background: transparent; } ._channelTab_o7jdu_1:hover, ._channelTab_o7jdu_1._active_o7jdu_77 { color: var(--color-primary-dark); } ._channelTab_o7jdu_1._active_o7jdu_77::after { background: var(--color-primary); } ._channelTab_o7jdu_1 svg { width: 14px; height: 14px; } ._channelTab_o7jdu_1 small { min-width: 18px; padding: 1px 5px; border-radius: var(--radius-full); background: var(--color-gray-light); color: var(--text-muted); font-size: 9px; text-align: center; } ._active_o7jdu_77 small { background: color-mix(in srgb, var(--color-primary) 14%, var(--color-white)); color: var(--color-primary-dark); } ._personCell_o7jdu_133 { min-width: 190px; display: flex; align-items: center; gap: var(--space-3); } ._avatarWrap_o7jdu_147 { position: relative; flex-shrink: 0; } ._avatar_o7jdu_147 { width: 38px; height: 38px; display: grid; place-items: center; border: 2px solid var(--color-white); border-radius: var(--radius-full); color: var(--color-white); font-size: 11px; font-weight: var(--font-weight-semibold); box-shadow: var(--shadow-sm); } ._unread_o7jdu_183 { position: absolute; top: -5px; left: -5px; min-width: 18px; height: 18px; padding: 0 4px; display: grid; place-items: center; border: 2px solid var(--color-white); border-radius: var(--radius-full); background: var(--color-danger); color: var(--color-white); font-size: 8px; } ._personMeta_o7jdu_215, ._contact_o7jdu_217 { min-width: 0; display: flex; flex-direction: column; gap: 2px; } ._personMeta_o7jdu_215 strong { color: var(--text-primary-dark); font-size: var(--font-size-xs); } ._personMeta_o7jdu_215 span, ._personMeta_o7jdu_215 small, ._contact_o7jdu_217 small { overflow: hidden; color: var(--text-muted); font-size: 10px; text-overflow: ellipsis; } ._message_o7jdu_259 { max-width: 190px; white-space: nowrap; } ._status_o7jdu_269 { display: inline-flex; padding: 3px 8px; border-radius: var(--radius-full); font-size: 10px; font-weight: var(--font-weight-semibold); } ._open_o7jdu_285 { background: color-mix(in srgb, var(--color-success) 12%, var(--color-white)); color: var(--color-success); } ._pending_o7jdu_293 { background: color-mix(in srgb, var(--color-warning) 12%, var(--color-white)); color: var(--color-warning); } ._closed_o7jdu_301 { background: var(--color-gray-light); color: var(--text-secondary); } ._tags_o7jdu_311 { display: flex; gap: 4px; } ._tags_o7jdu_311 span { padding: 3px 8px; border-radius: var(--radius-full); background: color-mix(in srgb, var(--color-primary) 12%, var(--color-white)); color: var(--color-primary-dark); font-size: 10px; } ._muted_o7jdu_337 { color: var(--text-muted); } ._toolbarIcon_o7jdu_343 { color: var(--color-primary); } @media (max-width: 768px) { ._channelTabs_o7jdu_1 { padding: 0; } ._channelTab_o7jdu_1 { min-height: 38px; } } /* Conversation view */ ._inboxView_o7jdu_371 { height: calc(100vh - 96px); min-height: 590px; display: grid; grid-template-columns: minmax(245px, 270px) minmax(420px, 1fr) minmax( 245px, 275px ); gap: var(--space-3); padding: var(--space-3); overflow: hidden; background: var(--color-bg-light); } ._conversationPanel_o7jdu_399, ._chatPanel_o7jdu_401, ._detailsPanel_o7jdu_403 { min-width: 0; overflow: hidden; border: 1px solid var(--border-light); border-radius: var(--radius-lg); background: var(--color-white); box-shadow: var(--shadow-sm); } ._conversationPanel_o7jdu_399 { display: flex; flex-direction: column; } ._listHeading_o7jdu_431 { padding: var(--space-4) var(--space-3) var(--space-2); display: flex; align-items: flex-start; gap: var(--space-2); } ._listHeading_o7jdu_431 > div:nth-child(2) { flex: 1; min-width: 0; } ._listHeading_o7jdu_431 span { color: var(--text-muted); font-size: 10px; } ._listHeading_o7jdu_431 h1 { margin: 4px 0 0; display: flex; align-items: center; gap: 5px; color: var(--text-primary-dark); font-size: 14px; } ._listHeading_o7jdu_431 h1 svg { width: 14px; } ._backButton_o7jdu_485, ._listTools_o7jdu_487 button, ._conversationSearch_o7jdu_489 button { width: 30px; height: 30px; display: grid; place-items: center; flex-shrink: 0; border: 1px solid var(--border-light); border-radius: var(--radius-full); background: var(--color-white); color: var(--text-secondary); cursor: pointer; } ._listTools_o7jdu_487 { display: flex; gap: 5px; } ._listTools_o7jdu_487 button:hover, ._backButton_o7jdu_485:hover { border-color: var(--color-primary); color: var(--color-primary); } ._conversationSearch_o7jdu_489 { height: 34px; margin: 0 var(--space-3) var(--space-2); padding: 0 8px; display: flex; align-items: center; gap: 6px; border: 1px solid var(--border-default); border-radius: var(--radius-md); } ._conversationSearch_o7jdu_489 > svg { color: var(--text-muted); } ._conversationSearch_o7jdu_489 input { min-width: 0; flex: 1; border: 0; outline: 0; font-size: var(--font-size-xs); } ._conversationSearch_o7jdu_489 button { width: 22px; height: 22px; border: 0; } ._listTabs_o7jdu_587 { margin: 0 var(--space-3) var(--space-3); padding: 4px; display: grid; grid-template-columns: 1fr 1fr; gap: 4px; border-radius: var(--radius-md); background: var(--color-gray-light); } ._listTabs_o7jdu_587 button { height: 31px; border: 0; border-radius: var(--radius-sm); background: transparent; color: var(--text-secondary); font-size: var(--font-size-xs); cursor: pointer; } ._listTabs_o7jdu_587 ._listTabActive_o7jdu_623 { background: var(--color-primary); color: var(--color-white); box-shadow: var(--shadow-sm); } ._conversationList_o7jdu_635 { padding: 0 var(--space-2) var(--space-3); overflow-y: auto; } ._conversationCard_o7jdu_643 { width: 100%; margin-bottom: 9px; padding: 12px 10px; display: flex; align-items: center; gap: 10px; border: 1px solid var(--border-light); border-radius: var(--radius-lg); background: var(--color-white); text-align: left; box-shadow: var(--shadow-sm); cursor: pointer; } ._conversationCard_o7jdu_643:hover, ._conversationSelected_o7jdu_673 { border-color: color-mix( in srgb, var(--color-primary) 55%, var(--border-light) ); background: color-mix(in srgb, var(--color-primary) 5%, var(--color-white)); } ._viewAvatar_o7jdu_689 { width: 39px; height: 39px; display: grid; place-items: center; flex-shrink: 0; border-radius: var(--radius-full); color: var(--color-white); font-size: 11px; font-weight: var(--font-weight-bold); } ._conversationCopy_o7jdu_711 { min-width: 0; flex: 1; display: flex; flex-direction: column; gap: 3px; } ._conversationCopy_o7jdu_711 strong { overflow: hidden; color: var(--text-primary-dark); font-size: var(--font-size-xs); white-space: nowrap; text-overflow: ellipsis; } ._conversationCopy_o7jdu_711 small { overflow: hidden; color: var(--text-muted); font-size: 10px; white-space: nowrap; text-overflow: ellipsis; } ._conversationCard_o7jdu_643 time { align-self: flex-start; color: var(--text-muted); font-size: 9px; } ._chatPanel_o7jdu_401 { display: flex; flex-direction: column; } ._chatHeader_o7jdu_773 { min-height: 66px; padding: 10px 14px; display: flex; align-items: center; justify-content: space-between; border-bottom: 1px solid var(--border-light); } ._chatIdentity_o7jdu_789 { display: flex; align-items: center; gap: 10px; } ._chatIdentity_o7jdu_789 > div { display: flex; flex-direction: column; gap: 2px; } ._chatIdentity_o7jdu_789 strong { color: var(--text-primary-dark); font-size: var(--font-size-sm); } ._chatIdentity_o7jdu_789 small { color: var(--text-muted); font-size: 9px; } ._endCall_o7jdu_825 { width: 34px; height: 34px; display: grid; place-items: center; border: 0; border-radius: var(--radius-md); background: color-mix(in srgb, var(--color-danger) 10%, var(--color-white)); color: var(--color-danger); cursor: pointer; } ._chatBody_o7jdu_849 { flex: 1; padding: 18px 12px; overflow-y: auto; background: color-mix(in srgb, var(--color-primary) 2%, var(--color-white)); } ._messageRow_o7jdu_861 { margin-bottom: 12px; display: flex; align-items: flex-end; gap: 8px; } ._agentMessage_o7jdu_873 { justify-content: flex-end; } ._messageAvatar_o7jdu_879 { width: 36px; height: 36px; display: grid; place-items: center; flex-shrink: 0; border-radius: var(--radius-full); background: var(--color-primary); color: var(--color-white); font-size: 11px; font-weight: var(--font-weight-bold); } ._messageBubble_o7jdu_903 { max-width: 72%; padding: 9px 11px 7px; border-radius: 4px 12px 12px; background: var(--color-gray-light); color: var(--text-primary-dark); } ._agentMessage_o7jdu_873 ._messageBubble_o7jdu_903 { border-radius: 12px 4px 12px 12px; background: color-mix(in srgb, var(--color-primary) 11%, var(--color-white)); } ._messageBubble_o7jdu_903 p { margin: 0 0 4px; line-height: 1.45; white-space: pre-wrap; } ._messageBubble_o7jdu_903 time { display: block; color: var(--text-muted); font-size: 8px; text-align: right; } ._composer_o7jdu_949 { padding: 10px 12px 13px; display: flex; align-items: center; gap: 9px; border-top: 1px solid var(--border-light); } ._composer_o7jdu_949 textarea { min-width: 0; flex: 1; resize: none; padding: 10px 12px; border: 1px solid var(--border-default); border-radius: var(--radius-md); outline: 0; color: var(--text-primary-dark); font: inherit; } ._composer_o7jdu_949 textarea:focus { border-color: var(--color-primary); box-shadow: 0 0 0 2px color-mix(in srgb, var(--color-primary) 12%, transparent); } ._attachButton_o7jdu_995, ._sendButton_o7jdu_997 { width: 35px; height: 35px; display: grid; place-items: center; flex-shrink: 0; border-radius: var(--radius-full); cursor: pointer; } ._attachButton_o7jdu_995 { border: 1px solid var(--border-default); background: var(--color-white); color: var(--color-primary); } ._sendButton_o7jdu_997 { border: 0; background: var(--color-primary); color: var(--color-white); } ._sendButton_o7jdu_997:disabled { opacity: 0.45; cursor: not-allowed; } ._detailsPanel_o7jdu_403 { padding: 0 16px; } ._widgetTitle_o7jdu_1051 { min-height: 66px; display: flex; align-items: center; justify-content: center; gap: 6px; border-bottom: 1px solid var(--border-light); color: var(--text-primary-dark); } ._aboutSection_o7jdu_1069, ._tagSection_o7jdu_1071 { padding: 16px 0; } ._aboutSection_o7jdu_1069 h2, ._tagSection_o7jdu_1071 h2 { margin: 0 0 13px; color: var(--text-primary-dark); font-size: var(--font-size-sm); } ._detailLine_o7jdu_1089 { margin-bottom: 11px; display: grid; grid-template-columns: 15px minmax(0, 1fr) 15px; align-items: start; gap: 7px; color: var(--text-secondary); } ._detailLine_o7jdu_1089 svg { margin-top: 1px; } ._detailLine_o7jdu_1089 span { overflow-wrap: anywhere; color: var(--text-primary-dark); font-size: 10px; line-height: 1.4; } ._tagHeading_o7jdu_1123 { display: flex; align-items: center; justify-content: space-between; } ._tagHeading_o7jdu_1123 button { padding: 5px 9px; border: 1px solid var(--border-light); border-radius: var(--radius-sm); background: var(--color-white); color: var(--color-primary-dark); font-size: 10px; cursor: pointer; } ._detailTags_o7jdu_1151 { display: flex; flex-wrap: wrap; gap: 6px; } ._detailTags_o7jdu_1151 > span { padding: 4px 6px 4px 9px; display: inline-flex; align-items: center; gap: 4px; border-radius: var(--radius-full); background: color-mix(in srgb, var(--color-primary) 12%, var(--color-white)); color: var(--color-primary-dark); font-size: 10px; } ._detailTags_o7jdu_1151 button { padding: 0; display: grid; border: 0; background: transparent; color: inherit; cursor: pointer; } @media (max-width: 1050px) { ._inboxView_o7jdu_371 { grid-template-columns: 245px minmax(390px, 1fr); overflow: auto; } ._detailsPanel_o7jdu_403 { display: none; } } @media (max-width: 720px) { ._inboxView_o7jdu_371 { height: auto; min-height: calc(100vh - 80px); grid-template-columns: 1fr; overflow: visible; } ._conversationPanel_o7jdu_399 { max-height: 430px; } ._chatPanel_o7jdu_401 { min-height: 650px; } } ._headerActions_o7jdu_1247 { display: flex; align-items: center; justify-content: flex-end; gap: 8px; } /* ================================================================ PAGE WRAPPER ================================================================ */ ._app_11e1p_9 { width: 100%; min-width: 0; display: flex; flex-direction: column; box-sizing: border-box; color: var(--text-primary-dark); background: transparent; } ._app_11e1p_9 *, ._app_11e1p_9 *::before, ._app_11e1p_9 *::after { box-sizing: border-box; } /* ================================================================ CONTENT ================================================================ */ ._content_11e1p_57 { width: 100%; min-width: 0; display: flex; flex-direction: column; gap: var(--space-4); padding-top: var(--space-4); box-sizing: border-box; } /* ================================================================ PAGE HEADER ================================================================ */ ._pageHeader_11e1p_93 { width: 100%; min-width: 0; display: flex; align-items: flex-start; justify-content: space-between; gap: var(--space-4); } ._pageTitle_11e1p_115 { margin: 0 0 4px; font-size: 18px; font-weight: var(--font-weight-bold); line-height: 1.25; color: var(--text-primary-dark); letter-spacing: -0.02em; } ._pageSubtitle_11e1p_143 { margin: 0; font-size: var(--font-size-xs); line-height: 1.5; color: var(--text-secondary); } /* ================================================================ HIDDEN INPUT ================================================================ */ ._hiddenInput_11e1p_171 { display: none; } /* ================================================================ API ERROR / ACTION MESSAGE ================================================================ */ ._apiError_11e1p_187, ._actionMessage_11e1p_189 { width: 100%; min-height: 42px; display: flex; align-items: center; gap: 9px; padding: 10px 13px; border-radius: var(--radius-md); font-size: var(--font-size-xs); font-weight: var(--font-weight-medium); } ._apiError_11e1p_187 { background: #fef2f2; border: 1px solid #fecaca; color: #b91c1c; } ._actionMessage_11e1p_189 { background: #f0fdf4; border: 1px solid #bbf7d0; color: #15803d; } ._dismissError_11e1p_259, ._dismissMessage_11e1p_261 { width: 26px; height: 26px; display: inline-flex; align-items: center; justify-content: center; margin-left: auto; padding: 0; border: none; background: transparent; color: currentColor; cursor: pointer; border-radius: var(--radius-sm); } ._dismissError_11e1p_259:hover { background: #fee2e2; } ._dismissMessage_11e1p_261:hover { background: #dcfce7; } /* ================================================================ COMMON BUTTONS ================================================================ */ ._btn_11e1p_331 { min-height: 34px; display: inline-flex; align-items: center; justify-content: center; gap: 7px; padding: 0 13px; border: 1px solid transparent; border-radius: var(--radius-md); font-family: inherit; font-size: var(--font-size-sm); font-weight: var(--font-weight-semibold); line-height: 1; white-space: nowrap; cursor: pointer; transition: background var(--transition-fast), border-color var(--transition-fast), color var(--transition-fast), box-shadow var(--transition-fast), transform var(--transition-fast); } ._btn_11e1p_331:disabled { opacity: 0.55; cursor: not-allowed; transform: none; } ._btnPrimary_11e1p_417 { background: var(--color-primary); color: var(--color-white); border-color: var(--color-primary); } ._btnPrimary_11e1p_417:hover:not(:disabled) { filter: brightness(0.96); box-shadow: var(--shadow-sm); } ._btnOutline_11e1p_445 { background: var(--color-white); color: var(--text-primary-dark); border-color: var(--border-default); } ._btnOutline_11e1p_445:hover:not(:disabled) { background: var(--color-bg-light); } ._btnWarnOutline_11e1p_469 { background: #fffbeb; color: #d97706; border-color: #fde68a; } ._btnWarnOutline_11e1p_469:hover:not(:disabled) { background: #fef3c7; } /* ================================================================ PANELS ROW ================================================================ */ ._panelsRow_11e1p_501 { width: 100%; display: grid; grid-template-columns: minmax(0, 1.3fr) minmax(0, 1fr); gap: var(--space-4); align-items: stretch; } /* ================================================================ PANEL ================================================================ */ ._panel_11e1p_501 { min-width: 0; min-height: 0; height: 280px; max-height: 280px; display: flex; flex-direction: column; overflow: hidden; background: var(--color-white); border: 1px solid var(--border-light); border-radius: var(--radius-lg); box-shadow: var(--shadow-sm); padding: 20px; } /* ================================================================ PANEL TITLE ================================================================ */ ._panelTitle_11e1p_591 { flex-shrink: 0; margin: 0 0 14px; font-size: var(--font-size-base); font-weight: var(--font-weight-semibold); line-height: 1.4; color: var(--text-primary-dark); } /* ================================================================ COLUMN MAPPING ================================================================ */ ._mapList_11e1p_627 { flex: 1; min-height: 0; display: flex; flex-direction: column; gap: 8px; overflow-y: auto; overflow-x: hidden; padding-right: 4px; scrollbar-width: thin; scrollbar-color: #cbd5e1 transparent; } ._mapList_11e1p_627::-webkit-scrollbar { width: 5px; } ._mapList_11e1p_627::-webkit-scrollbar-track { background: transparent; } ._mapList_11e1p_627::-webkit-scrollbar-thumb { background: #cbd5e1; border-radius: 999px; } ._mapList_11e1p_627::-webkit-scrollbar-thumb:hover { background: #94a3b8; } /* ================================================================ FILE CARD ================================================================ */ ._fileCard_11e1p_709 { width: 100%; min-height: 116px; display: flex; align-items: flex-start; gap: 12px; padding: 15px; margin-bottom: 16px; border: 1px solid var(--border-default); border-radius: var(--radius-md); background: var(--color-white); } ._fileIcon_11e1p_751 { width: 42px; height: 42px; flex-shrink: 0; display: flex; align-items: center; justify-content: center; border-radius: 9px; background: #16a34a; color: var(--color-white); } ._fileMeta_11e1p_785 { flex: 1; min-width: 0; display: flex; flex-direction: column; } ._fileName_11e1p_803 { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; font-size: var(--font-size-sm); font-weight: var(--font-weight-semibold); line-height: 1.45; color: var(--text-primary-dark); } ._fileSub_11e1p_835 { display: flex; align-items: center; gap: 5px; margin-top: 3px; font-size: var(--font-size-xs); line-height: 1.4; color: var(--text-secondary); } ._fileStatus_11e1p_865 { display: flex; align-items: center; gap: 5px; margin-top: 10px; font-size: var(--font-size-xs); font-weight: var(--font-weight-semibold); color: #16a34a; } ._fileActions_11e1p_895 { display: flex; flex-direction: column; gap: 8px; flex-shrink: 0; } /* ================================================================ SMALL BUTTON ================================================================ */ ._smallBtn_11e1p_921 { min-height: 34px; display: inline-flex; align-items: center; justify-content: center; gap: 6px; padding: 0 11px; border-radius: var(--radius-md); font-family: inherit; font-size: var(--font-size-xs); font-weight: var(--font-weight-semibold); white-space: nowrap; cursor: pointer; transition: background var(--transition-fast), border-color var(--transition-fast), color var(--transition-fast); } ._smallBtn_11e1p_921:disabled { opacity: 0.6; cursor: not-allowed; } ._smallBtnOutline_11e1p_991 { background: var(--color-white); border: 1px solid var(--border-default); color: var(--text-primary-dark); } ._smallBtnOutline_11e1p_991:hover:not(:disabled) { background: var(--color-bg-light); } ._smallBtnDanger_11e1p_1015 { background: #fff; border: 1px solid #fecaca; color: #dc2626; } ._smallBtnDanger_11e1p_1015:hover:not(:disabled) { background: #fef2f2; } /* ================================================================ UPLOAD EMPTY ================================================================ */ ._uploadEmpty_11e1p_1047 { min-height: 190px; display: flex; flex-direction: column; align-items: center; justify-content: center; padding: 28px 20px; border: 1px dashed #cbd5e1; border-radius: 10px; text-align: center; } ._uploadEmptyIcon_11e1p_1081 { width: 40px; height: 40px; display: flex; align-items: center; justify-content: center; margin-bottom: 10px; border-radius: 10px; background: #eff6ff; color: #2563eb; } ._uploadEmptyTitle_11e1p_1115 { margin-bottom: 4px; font-size: var(--font-size-sm); font-weight: var(--font-weight-semibold); color: var(--text-primary-dark); } ._uploadEmptyText_11e1p_1135 { max-width: 340px; margin-bottom: 14px; font-size: var(--font-size-xs); line-height: 1.5; color: var(--text-secondary); } /* ================================================================ REQUIRED COLUMNS ================================================================ */ ._requiredLabel_11e1p_1167 { margin-bottom: 8px; font-size: var(--font-size-xs); font-weight: var(--font-weight-medium); color: var(--text-primary-dark); } ._pillRow_11e1p_1187 { display: flex; align-items: center; flex-wrap: wrap; gap: 6px; } ._pill_11e1p_1187 { min-height: 28px; display: inline-flex; align-items: center; padding: 3px 9px; border-radius: 999px; background: #eff6ff; color: #2563eb; font-size: 10px; font-weight: var(--font-weight-semibold); line-height: 1.3; } /* ================================================================ COLUMN MAPPING ================================================================ */ ._mapList_11e1p_627 { display: flex; flex-direction: column; gap: 8px; } ._mapRow_11e1p_1269 { min-width: 0; display: grid; grid-template-columns: minmax(0, 1fr) 20px minmax(0, 1fr); align-items: center; gap: 7px; font-size: var(--font-size-xs); line-height: 1.4; } ._mapSource_11e1p_1307 { min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; font-weight: var(--font-weight-medium); color: var(--text-primary-dark); } ._mapArrow_11e1p_1335 { display: flex; align-items: center; justify-content: center; color: var(--text-secondary); } ._mapTarget_11e1p_1351 { min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; padding: 7px 10px; border-radius: 6px; background: #f8fafc; color: var(--text-primary-dark); font-weight: var(--font-weight-medium); text-align: center; } ._mappingEmpty_11e1p_1395 { min-height: 185px; display: flex; align-items: center; justify-content: center; padding: 20px; color: #94a3b8; font-size: var(--font-size-xs); text-align: center; } /* ================================================================ REVIEW CARD ================================================================ */ ._reviewCard_11e1p_1435 { width: 100%; overflow: hidden; background: var(--color-white); border: 1px solid var(--border-light); border-radius: var(--radius-lg); box-shadow: var(--shadow-sm); } /* ================================================================ REVIEW HEADER ================================================================ */ ._reviewHeader_11e1p_1471 { padding: 20px; } ._reviewTitle_11e1p_1479 { margin: 0 0 14px; font-size: var(--font-size-base); font-weight: var(--font-weight-semibold); line-height: 1.4; color: var(--text-primary-dark); } /* ================================================================ STAT ROW ================================================================ */ ._statRow_11e1p_1511 { display: flex; align-items: center; flex-wrap: wrap; gap: 8px; margin-bottom: 14px; } ._statPill_11e1p_1533 { min-height: 32px; display: inline-flex; align-items: center; padding: 5px 13px; border-radius: 8px; font-size: var(--font-size-xs); font-weight: var(--font-weight-semibold); line-height: 1.2; } ._statTotal_11e1p_1567 { background: #f8fafc; color: #0f172a; } ._statReady_11e1p_1579 { background: #f0fdf4; color: #16a34a; } ._statWarning_11e1p_1591 { background: #fffbeb; color: #d97706; } ._statError_11e1p_1603 { background: #fef2f2; color: #dc2626; } /* ================================================================ FILTER ROW ================================================================ */ ._filterRow_11e1p_1623 { width: 100%; display: grid; grid-template-columns: minmax(280px, 1fr) 180px 180px 160px auto; align-items: center; gap: 8px; margin-top: 0; } /* ================================================================ SEARCH ================================================================ */ ._searchInput_11e1p_1669 { width: 100%; min-width: 0; height: 42px; display: flex; align-items: center; gap: 8px; padding: 0 11px; border: 1px solid #d7dfeb; border-radius: 9px; background: var(--color-white); color: #64748b; transition: border-color var(--transition-fast), box-shadow var(--transition-fast); } ._searchInput_11e1p_1669:focus-within { border-color: var(--color-primary); box-shadow: 0 0 0 2px rgba(37, 99, 235, 0.08); } ._searchInput_11e1p_1669 input { width: 100%; min-width: 0; height: 100%; padding: 0; border: none; outline: none; background: transparent; color: var(--text-primary-dark); font-family: inherit; font-size: var(--font-size-xs); } ._searchInput_11e1p_1669 input::placeholder { color: #94a3b8; } ._clearSearch_11e1p_1783 { width: 24px; height: 24px; flex-shrink: 0; display: inline-flex; align-items: center; justify-content: center; padding: 0; border: none; border-radius: 5px; background: transparent; color: #64748b; cursor: pointer; } ._clearSearch_11e1p_1783:hover { background: #f1f5f9; } /* ================================================================ SELECT ================================================================ */ ._selectWrapper_11e1p_1845 { position: relative; width: 100%; min-width: 0; } ._filterSelect_11e1p_1859 { width: 100%; height: 42px; appearance: none; padding: 0 34px 0 12px; border: 1px solid #d7dfeb; border-radius: 9px; outline: none; background: var(--color-white); color: var(--text-primary-dark); font-family: inherit; font-size: var(--font-size-xs); cursor: pointer; transition: border-color var(--transition-fast), box-shadow var(--transition-fast); } ._filterSelect_11e1p_1859:focus { border-color: var(--color-primary); box-shadow: 0 0 0 2px rgba(37, 99, 235, 0.08); } ._selectWrapper_11e1p_1845 > svg { position: absolute; top: 50%; right: 11px; width: 15px; height: 15px; pointer-events: none; transform: translateY(-50%); color: #475569; } /* ================================================================ ISSUES CHECKBOX ================================================================ */ ._issuesCheck_11e1p_1971 { min-height: 42px; display: inline-flex; align-items: center; justify-content: flex-end; gap: 7px; margin-left: 4px; padding: 0 2px; font-size: var(--font-size-xs); color: var(--text-secondary); white-space: nowrap; cursor: pointer; } ._checkbox_11e1p_2017 { width: 15px; height: 15px; flex-shrink: 0; margin: 0; accent-color: var(--color-primary); cursor: pointer; } /* ================================================================ TABLE WRAPPER ================================================================ */ ._tableWrap_11e1p_2051 { width: 100%; overflow-x: auto; border-top: 1px solid var(--border-light); scrollbar-width: thin; } /* ================================================================ TABLE ================================================================ */ ._table_11e1p_2051 { width: 100%; min-width: 1120px; border-collapse: collapse; table-layout: auto; } /* ================================================================ TABLE HEADER ================================================================ */ ._table_11e1p_2051 thead th { height: 46px; padding: 10px 14px; background: #f8fafc; border-bottom: 1px solid var(--border-light); color: #64748b; font-size: 10px; font-weight: var(--font-weight-semibold); line-height: 1.4; text-align: left; text-transform: uppercase; letter-spacing: 0.025em; white-space: nowrap; } ._table_11e1p_2051 thead th:first-child { width: 44px; text-align: center; } ._table_11e1p_2051 thead th:nth-child(2) { width: 58px; } ._table_11e1p_2051 thead th:nth-child(3) { min-width: 180px; } ._table_11e1p_2051 thead th:nth-child(4) { width: 105px; } ._table_11e1p_2051 thead th:nth-child(5) { min-width: 310px; } ._table_11e1p_2051 thead th:nth-child(6) { min-width: 150px; } ._table_11e1p_2051 thead th:nth-child(7) { min-width: 145px; } ._table_11e1p_2051 thead th:nth-child(8) { min-width: 175px; } ._table_11e1p_2051 thead th:nth-child(9) { width: 110px; } /* ================================================================ TABLE BODY ================================================================ */ ._table_11e1p_2051 tbody td { height: 72px; padding: 12px 14px; border-bottom: 1px solid var(--border-light); color: var(--text-primary-dark); font-size: var(--font-size-xs); line-height: 1.45; vertical-align: middle; } ._table_11e1p_2051 tbody tr { background: var(--color-white); transition: background var(--transition-fast), box-shadow var(--transition-fast); } ._table_11e1p_2051 tbody tr:hover { background: #fafcff; } ._table_11e1p_2051 tbody tr._selectedRow_11e1p_2299 { background: #f8fbff; } ._table_11e1p_2051 tbody tr:last-child td { border-bottom: none; } ._table_11e1p_2051 tbody td:first-child { text-align: center; } /* ================================================================ ROW NUMBER ================================================================ */ ._rowNumber_11e1p_2331 { color: #334155; font-weight: var(--font-weight-medium); } /* ================================================================ ROW TITLE ================================================================ */ ._rowTitle_11e1p_2351 { max-width: 205px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; color: #0f172a; font-weight: var(--font-weight-semibold); font-size: var(--font-size-xs); } /* ================================================================ PLATFORM ICONS ================================================================ */ ._platformIcons_11e1p_2391 { display: flex; align-items: center; gap: 8px; } ._platformIcon_11e1p_2391 { width: 28px; height: 28px; min-width: 28px; display: inline-flex; align-items: center; justify-content: center; border-radius: 50%; overflow: hidden; flex-shrink: 0; background: transparent; } ._platformIconImage_11e1p_2429 { width: 28px; height: 28px; display: block; object-fit: contain; } ._platformIconFallback_11e1p_2443 { background: #94a3b8; color: #ffffff; font-size: 12px; font-weight: 700; } ._noValue_11e1p_2457 { color: #94a3b8; } /* ================================================================ CAPTION + MEDIA ================================================================ */ ._captionCell_11e1p_2473 { width: 100%; max-width: 360px; display: flex; align-items: center; gap: 10px; } ._captionText_11e1p_2493 { min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; color: #64748b; font-size: var(--font-size-xs); line-height: 1.4; } /* ================================================================ THUMBNAIL ================================================================ */ ._thumb_11e1p_2533 { width: 44px; height: 34px; flex-shrink: 0; display: flex; align-items: center; justify-content: center; overflow: hidden; border-radius: 6px; color: #94a3b8; font-size: 8px; font-weight: var(--font-weight-bold); line-height: 1.15; text-align: center; background: #f1f5f9; } ._thumbEmpty_11e1p_2587 { background: #f1f5f9; color: #94a3b8; } ._thumbEmpty_11e1p_2587 svg { width: 17px; height: 17px; display: block; color: #94a3b8; stroke: currentColor; } ._thumbImage_11e1p_2621 { width: 100%; height: 100%; display: block; object-fit: cover; border-radius: inherit; } /* ================================================================ DATE ================================================================ */ ._dateText_11e1p_2651 { display: flex; flex-direction: column; gap: 1px; color: #0f172a; font-size: var(--font-size-xs); line-height: 1.45; white-space: nowrap; } ._dateText_11e1p_2651 span:first-child { font-weight: var(--font-weight-medium); } ._dateText_11e1p_2651 span:last-child { font-weight: var(--font-weight-regular); } ._dateMissing_11e1p_2697 { color: #94a3b8; } ._timezoneText_11e1p_2705 { color: #334155; white-space: nowrap; font-size: var(--font-size-xs); } /* ================================================================ VALIDATION ================================================================ */ ._validation_11e1p_2729 { display: inline-flex; align-items: center; gap: 5px; font-size: var(--font-size-xs); font-weight: var(--font-weight-semibold); line-height: 1.4; white-space: nowrap; } ._validationStack_11e1p_2759 { display: flex; flex-direction: column; gap: 2px; } ._validationReady_11e1p_2773 { color: #16a34a !important; } ._validationWarning_11e1p_2781 { color: #d97706 !important; } ._validationError_11e1p_2789 { color: #dc2626 !important; } ._validationReady_11e1p_2773 svg, ._validationWarning_11e1p_2781 svg, ._validationError_11e1p_2789 svg { color: currentColor !important; } ._validationMessage_11e1p_2809 { max-width: 170px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; font-size: 10px; font-weight: var(--font-weight-medium); line-height: 1.35; } ._validationReady_11e1p_2773 ._validationMessage_11e1p_2809 { color: #16a34a !important; } ._validationWarning_11e1p_2781 ._validationMessage_11e1p_2809 { color: #d97706 !important; } ._validationError_11e1p_2789 ._validationMessage_11e1p_2809 { color: #dc2626 !important; } /* ================================================================ ROW ACTIONS ================================================================ */ ._rowActions_11e1p_2873 { display: flex; align-items: center; gap: 6px; } /* ================================================================ EDIT BUTTON ================================================================ */ ._editBtn_11e1p_2895 { min-height: 34px; padding: 0 10px; border: 1px solid #d7dfeb; border-radius: 8px; background: var(--color-white); color: #0f172a; font-family: inherit; font-size: var(--font-size-xs); font-weight: var(--font-weight-semibold); cursor: pointer; transition: background var(--transition-fast), border-color var(--transition-fast), box-shadow var(--transition-fast); } ._editBtn_11e1p_2895:hover { background: #f8fafc; border-color: #cbd5e1; box-shadow: var(--shadow-sm); } /* ================================================================ MORE MENU ================================================================ */ ._moreMenuWrapper_11e1p_2973 { position: relative; width: 32px; height: 34px; display: flex; align-items: center; justify-content: center; } ._moreBtn_11e1p_2995 { width: 32px; height: 34px; display: inline-flex; align-items: center; justify-content: center; padding: 0; border: none; border-radius: 8px; background: transparent; color: #64748b; cursor: pointer; transition: background var(--transition-fast), color var(--transition-fast); } ._moreBtn_11e1p_2995:hover { background: #f1f5f9; color: #0f172a; } ._menuPopover_11e1p_3057 { position: absolute; z-index: 50; top: calc(100% + 5px); right: 0; width: 155px; overflow: hidden; padding: 4px; background: var(--color-white); border: 1px solid var(--border-light); border-radius: 9px; box-shadow: 0 10px 25px rgba(15, 23, 42, 0.1), 0 2px 6px rgba(15, 23, 42, 0.06); } ._menuPopover_11e1p_3057 button { width: 100%; min-height: 34px; display: flex; align-items: center; padding: 0 10px; border: none; border-radius: 6px; background: transparent; color: #334155; font-family: inherit; font-size: 12px; font-weight: 500; text-align: left; cursor: pointer; transition: background var(--transition-fast); } ._menuPopover_11e1p_3057 button:hover { background: #f8fafc; } ._menuPopover_11e1p_3057 ._menuDanger_11e1p_3179 { color: #dc2626; } ._menuPopover_11e1p_3057 ._menuDanger_11e1p_3179:hover { background: #fef2f2; } /* ================================================================ EMPTY STATE ================================================================ */ ._emptyCell_11e1p_3203 { padding: 0 !important; height: auto !important; } ._emptyState_11e1p_3215 { min-height: 230px; display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 6px; padding: 35px 20px; color: #64748b; text-align: center; } ._emptyStateIcon_11e1p_3249 { width: 42px; height: 42px; display: flex; align-items: center; justify-content: center; margin-bottom: 4px; border-radius: 10px; background: #f8fafc; color: #94a3b8; } ._emptyState_11e1p_3215 strong { color: #334155; font-size: var(--font-size-sm); } ._emptyState_11e1p_3215 span { max-width: 400px; color: #94a3b8; font-size: var(--font-size-xs); line-height: 1.5; } ._spinner_11e1p_3315 { width: 18px; height: 18px; display: block; border: 2px solid #cbd5e1; border-top-color: var(--color-primary); border-radius: 50%; animation: _spin_11e1p_3315 0.7s linear infinite; } @keyframes _spin_11e1p_3315 { to { transform: rotate(360deg); } } /* ================================================================ FOOTER BAR ================================================================ */ ._footerBar_11e1p_3365 { min-height: 76px; display: flex; align-items: center; justify-content: space-between; gap: 20px; flex-wrap: wrap; padding: 14px 20px; border-top: 1px solid var(--border-light); background: #f8fafc; } ._footerInfo_11e1p_3401 { display: flex; align-items: flex-start; gap: 10px; color: #64748b; font-size: var(--font-size-xs); line-height: 1.45; } ._footerIcon_11e1p_3427 { width: 30px; height: 30px; display: flex; align-items: center; justify-content: center; flex-shrink: 0; border-radius: 7px; background: #fff; border: 1px solid #e2e8f0; color: #64748b; } ._footerInfo_11e1p_3401 strong { display: block; margin-bottom: 2px; color: #0f172a; font-size: var(--font-size-sm); font-weight: var(--font-weight-semibold); } ._footerNote_11e1p_3489 { display: block; color: #64748b; font-size: 10px; line-height: 1.45; } /* ================================================================ FOOTER ACTIONS ================================================================ */ ._footerActions_11e1p_3517 { display: flex; align-items: center; gap: 8px; flex-wrap: wrap; } /* ================================================================ MODAL ================================================================ */ ._modalOverlay_11e1p_3543 { position: fixed; z-index: 1000; inset: 0; display: flex; align-items: center; justify-content: center; padding: 24px; background: rgba(15, 23, 42, 0.35); backdrop-filter: blur(2px); } ._modal_11e1p_3543 { width: min(620px, 100%); max-height: calc(100vh - 48px); display: flex; flex-direction: column; overflow: hidden; background: #fff; border: 1px solid #e2e8f0; border-radius: 14px; box-shadow: 0 24px 60px rgba(15, 23, 42, 0.18), 0 4px 12px rgba(15, 23, 42, 0.08); } ._detailsModal_11e1p_3621 { width: min(560px, 100%); } /* ================================================================ MODAL HEADER ================================================================ */ ._modalHeader_11e1p_3637 { display: flex; align-items: flex-start; justify-content: space-between; gap: 20px; padding: 20px; border-bottom: 1px solid #e2e8f0; } ._modalHeader_11e1p_3637 h2 { margin: 0 0 4px; color: #0f172a; font-size: 17px; font-weight: 700; } ._modalHeader_11e1p_3637 p { margin: 0; color: #64748b; font-size: 12px; line-height: 1.5; } ._modalClose_11e1p_3701 { width: 32px; height: 32px; flex-shrink: 0; display: inline-flex; align-items: center; justify-content: center; padding: 0; border: none; border-radius: 7px; background: transparent; color: #64748b; cursor: pointer; } ._modalClose_11e1p_3701:hover { background: #f1f5f9; color: #0f172a; } /* ================================================================ MODAL BODY ================================================================ */ ._modalBody_11e1p_3767 { overflow-y: auto; padding: 20px; } ._formGrid_11e1p_3779 { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 16px; } ._formField_11e1p_3795, ._formFieldFull_11e1p_3797 { display: flex; flex-direction: column; gap: 6px; } ._formFieldFull_11e1p_3797 { grid-column: 1 / -1; } ._formField_11e1p_3795 span, ._formFieldFull_11e1p_3797 span { color: #334155; font-size: 12px; font-weight: 600; } ._formField_11e1p_3795 input, ._formFieldFull_11e1p_3797 input, ._formField_11e1p_3795 textarea, ._formFieldFull_11e1p_3797 textarea { width: 100%; padding: 9px 11px; border: 1px solid #d7dfeb; border-radius: 8px; outline: none; background: #fff; color: #0f172a; font-family: inherit; font-size: 12px; transition: border-color var(--transition-fast), box-shadow var(--transition-fast); } ._formField_11e1p_3795 input, ._formFieldFull_11e1p_3797 input { height: 38px; } ._formField_11e1p_3795 textarea, ._formFieldFull_11e1p_3797 textarea { min-height: 95px; resize: vertical; line-height: 1.5; } ._formField_11e1p_3795 input:focus, ._formFieldFull_11e1p_3797 input:focus, ._formField_11e1p_3795 textarea:focus, ._formFieldFull_11e1p_3797 textarea:focus { border-color: var(--color-primary); box-shadow: 0 0 0 2px rgba(37, 99, 235, 0.08); } /* ================================================================ DETAILS ================================================================ */ ._detailsBody_11e1p_3945 { overflow-y: auto; display: flex; flex-direction: column; gap: 17px; padding: 20px; } ._detailItem_11e1p_3967 { display: flex; flex-direction: column; gap: 5px; } ._detailItem_11e1p_3967 > span:first-child { color: #64748b; font-size: 10px; font-weight: 600; text-transform: uppercase; letter-spacing: 0.04em; } ._detailItem_11e1p_3967 strong { color: #0f172a; font-size: 13px; font-weight: 600; line-height: 1.5; } ._detailLongText_11e1p_4025 { white-space: pre-wrap; word-break: break-word; } ._detailPlatforms_11e1p_4037 { display: flex; align-items: center; gap: 6px; } ._detailColumns_11e1p_4051 { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 20px; } /* ================================================================ MODAL FOOTER ================================================================ */ ._modalFooter_11e1p_4075 { display: flex; align-items: center; justify-content: flex-end; gap: 8px; padding: 14px 20px; border-top: 1px solid #e2e8f0; background: #f8fafc; } /* ================================================================ RESPONSIVE ================================================================ */ @media (max-width: 1200px) { ._panelsRow_11e1p_501 { grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); } ._selectWrapper_11e1p_1845 { min-width: 145px; } ._captionCell_11e1p_2473 { max-width: 300px; } } /* ================================================================ TABLET ================================================================ */ @media (max-width: 1050px) { ._panelsRow_11e1p_501 { grid-template-columns: 1fr; } ._mappingEmpty_11e1p_1395 { min-height: 120px; } ._filterRow_11e1p_1623 { align-items: stretch; } ._searchInput_11e1p_1669 { flex-basis: 100%; min-width: 100%; } ._issuesCheck_11e1p_1971 { margin-left: 0; } } @media (max-width: 900px) { ._content_11e1p_57 { padding-top: var(--space-3); } ._panel_11e1p_501 { padding: 16px; } ._reviewHeader_11e1p_1471 { padding: 16px; } ._footerBar_11e1p_3365 { padding: 14px 16px; } ._footerInfo_11e1p_3401 { flex: 1 1 100%; } ._footerActions_11e1p_3517 { width: 100%; } ._footerActions_11e1p_3517 ._btn_11e1p_331 { flex: 1; } } /* ================================================================ MOBILE ================================================================ */ @media (max-width: 700px) { ._content_11e1p_57 { gap: 12px; } ._pageHeader_11e1p_93 { flex-direction: column; gap: 8px; } ._pageTitle_11e1p_115 { font-size: var(--font-size-xl); } ._panelsRow_11e1p_501 { grid-template-columns: 1fr; gap: 12px; } ._fileCard_11e1p_709 { flex-wrap: wrap; } ._fileMeta_11e1p_785 { min-width: calc(100% - 54px); } ._fileActions_11e1p_895 { width: 100%; display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); } ._fileActions_11e1p_895 ._smallBtn_11e1p_921 { width: 100%; } ._filterRow_11e1p_1623 { display: grid; grid-template-columns: 1fr; gap: 8px; } ._searchInput_11e1p_1669, ._selectWrapper_11e1p_1845, ._filterSelect_11e1p_1859 { width: 100%; min-width: 0; } ._issuesCheck_11e1p_1971 { min-height: 34px; margin-left: 0; } ._footerBar_11e1p_3365 { flex-direction: column; align-items: stretch; } ._footerActions_11e1p_3517 { width: 100%; display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); } ._footerActions_11e1p_3517 ._btn_11e1p_331 { width: 100%; padding-left: 8px; padding-right: 8px; } ._formGrid_11e1p_3779 { grid-template-columns: 1fr; } ._formFieldFull_11e1p_3797 { grid-column: auto; } ._detailColumns_11e1p_4051 { grid-template-columns: 1fr; } ._modalOverlay_11e1p_3543 { padding: 12px; } ._modal_11e1p_3543 { max-height: calc(100vh - 24px); border-radius: 12px; } } /* ================================================================ SMALL MOBILE ================================================================ */ @media (max-width: 480px) { ._pageTitle_11e1p_115 { font-size: var(--font-size-lg); } ._panel_11e1p_501, ._reviewHeader_11e1p_1471 { padding: 14px; } ._fileActions_11e1p_895 { grid-template-columns: 1fr; } ._statRow_11e1p_1511 { gap: 6px; } ._statPill_11e1p_1533 { min-height: 29px; padding: 4px 9px; } ._footerActions_11e1p_3517 { grid-template-columns: 1fr; } ._footerActions_11e1p_3517 ._btn_11e1p_331 { min-height: 38px; } ._modalHeader_11e1p_3637, ._modalBody_11e1p_3767, ._detailsBody_11e1p_3945 { padding: 16px; } ._modalFooter_11e1p_4075 { padding: 12px 16px; } } /* ================================================================ VALIDATION ERROR MESSAGE ================================================================ */ ._validationError_11e1p_2789, ._validationError_11e1p_2789 span, ._validationError_11e1p_2789 svg { color: #dc2626 !important; } ._validationError_11e1p_2789 ._validationMessage_11e1p_2809 { color: #dc2626 !important; } /* ================================================================ CONTACT VIEW ================================================================ */ ._page_sv0hl_9 { width: 100%; min-width: 0; min-height: 100%; display: flex; flex-direction: column; gap: 16px; padding: 20px 0 32px; box-sizing: border-box; overflow: visible; } /* ================================================================ PAGE HEADER ================================================================ */ ._pageHeader_sv0hl_51 { width: 100%; display: flex; align-items: flex-start; justify-content: space-between; box-sizing: border-box; } ._headerLeft_sv0hl_71 { display: flex; flex-direction: column; gap: 10px; min-width: 0; } ._backButton_sv0hl_89 { width: fit-content; display: inline-flex; align-items: center; gap: 6px; padding: 0; border: 0; background: transparent; color: var(--text-secondary); font-size: var(--font-size-xs); font-weight: var(--font-weight-medium); cursor: pointer; transition: color 0.2s ease; } ._backButton_sv0hl_89:hover { color: var(--color-primary); } ._titleBlock_sv0hl_145 { min-width: 0; } ._pageTitle_sv0hl_153 { margin: 0; color: var(--text-primary-dark); font-size: var(--font-size-2xl); font-weight: var(--font-weight-bold); line-height: 1.25; } ._pageDescription_sv0hl_177 { margin: 5px 0 0; color: var(--text-secondary); font-size: var(--font-size-xs); line-height: 1.5; } /* ================================================================ PROFILE CARD ================================================================ */ ._profileCard_sv0hl_205 { width: 100%; display: flex; align-items: center; justify-content: space-between; gap: 24px; padding: 20px; box-sizing: border-box; background: var(--color-white); border: 1px solid var(--border-light); border-radius: 12px; box-shadow: var(--shadow-sm); overflow: visible; } ._profileMain_sv0hl_253 { min-width: 0; display: flex; align-items: center; gap: 16px; } ._avatar_sv0hl_271 { width: 58px; height: 58px; flex: 0 0 58px; display: flex; align-items: center; justify-content: center; border-radius: 50%; background: var(--brand-soft); color: var(--brand-ink); font-size: 18px; font-weight: var(--font-weight-bold); } ._profileInfo_sv0hl_313 { min-width: 0; } ._profileInfo_sv0hl_313 h2 { margin: 0 0 7px; color: var(--text-primary-dark); font-size: 18px; font-weight: var(--font-weight-semibold); line-height: 1.3; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; } ._profileMeta_sv0hl_357 { display: flex; align-items: center; flex-wrap: wrap; gap: 16px; } ._profileMeta_sv0hl_357 span { display: inline-flex; align-items: center; gap: 6px; color: var(--text-secondary); font-size: 12px; line-height: 1.4; } ._profileMeta_sv0hl_357 svg { flex-shrink: 0; } /* ================================================================ LIFECYCLE STATUS ================================================================ */ ._profileStatus_sv0hl_417 { flex-shrink: 0; display: flex; flex-direction: column; align-items: flex-end; gap: 5px; } ._statusLabel_sv0hl_437 { color: var(--text-secondary); font-size: 11px; font-weight: var(--font-weight-medium); } /* ================================================================ SECTION CARD ================================================================ */ ._sectionCard_sv0hl_461 { width: 100%; padding: 20px; box-sizing: border-box; background: var(--color-white); border: 1px solid var(--border-light); border-radius: 12px; box-shadow: var(--shadow-sm); overflow: visible; } /* ================================================================ SECTION HEADER ================================================================ */ ._sectionHeader_sv0hl_505 { display: flex; align-items: center; gap: 12px; padding-bottom: 16px; margin-bottom: 16px; border-bottom: 1px solid var(--border-light); } ._sectionIcon_sv0hl_531 { width: 34px; height: 34px; flex: 0 0 34px; display: flex; align-items: center; justify-content: center; border-radius: 8px; background: var(--color-bg-light); color: var(--color-primary); } ._sectionIcon_sv0hl_531 svg { width: 17px; height: 17px; } ._sectionHeader_sv0hl_505 h2 { margin: 0; color: var(--text-primary-dark); font-size: 14px; font-weight: var(--font-weight-semibold); line-height: 1.4; } ._sectionHeader_sv0hl_505 p { margin: 2px 0 0; color: var(--text-secondary); font-size: 11px; line-height: 1.4; } /* ================================================================ BASIC INFORMATION GRID ================================================================ */ ._detailsGrid_sv0hl_627 { width: 100%; display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); column-gap: 32px; row-gap: 20px; box-sizing: border-box; } ._detailItem_sv0hl_655 { min-width: 0; } ._fullWidth_sv0hl_663 { grid-column: 1 / -1; } ._detailLabel_sv0hl_671 { display: block; margin-bottom: 6px; color: var(--text-secondary); font-size: 11px; font-weight: var(--font-weight-medium); line-height: 1.4; } ._detailValue_sv0hl_699 { min-width: 0; color: var(--text-primary-dark); font-size: 13px; font-weight: var(--font-weight-regular); line-height: 1.5; overflow-wrap: anywhere; } ._detailValue_sv0hl_699 a { color: var(--color-primary); text-decoration: none; } ._detailValue_sv0hl_699 a:hover { text-decoration: underline; } /* ================================================================ ADDRESS ================================================================ */ ._addressValue_sv0hl_755 { display: flex; align-items: flex-start; gap: 8px; color: var(--text-primary-dark); font-size: 13px; line-height: 1.5; } ._addressValue_sv0hl_755 svg { flex-shrink: 0; margin-top: 3px; color: var(--text-secondary); } /* ================================================================ STATUS BADGES ================================================================ */ ._statusSuccess_sv0hl_805, ._statusInfo_sv0hl_807, ._statusWarning_sv0hl_809, ._statusNeutral_sv0hl_811, ._statusDanger_sv0hl_813 { display: inline-flex; align-items: center; width: fit-content; min-height: 22px; padding: 3px 9px; box-sizing: border-box; border-radius: 999px; font-size: 10px; font-weight: var(--font-weight-semibold); line-height: 1.3; } ._statusSuccess_sv0hl_805 { background: var(--color-success-soft); color: var(--color-success); } ._statusInfo_sv0hl_807 { background: var(--color-info-soft); color: var(--color-info); } ._statusWarning_sv0hl_809 { background: var(--color-warning-soft); color: var(--color-warning); } ._statusNeutral_sv0hl_811 { background: var(--color-bg-light); color: var(--text-secondary); } ._statusDanger_sv0hl_813 { background: var(--color-danger-soft); color: var(--color-danger); } /* ================================================================ EMAIL VALIDATION BOX ================================================================ */ ._validationBox_sv0hl_923 { width: 100%; padding: 16px; box-sizing: border-box; background: #f8faff; border: 1px solid var(--border-light); border-radius: 9px; overflow: visible; } /* ================================================================ EMAIL STATUS ================================================================ */ ._validationStatus_sv0hl_963 { width: 100%; display: flex; align-items: center; justify-content: space-between; gap: 16px; padding-bottom: 13px; margin-bottom: 14px; border-bottom: 1px solid var(--border-light); box-sizing: border-box; } /* ================================================================ VALIDATION GRID ================================================================ */ ._validationGrid_sv0hl_1007 { width: 100%; display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); column-gap: 32px; row-gap: 18px; box-sizing: border-box; } /* ================================================================ VALIDATION REASON ================================================================ */ ._reasonBox_sv0hl_1043 { width: 100%; min-height: 38px; display: flex; align-items: center; gap: 8px; padding: 9px 12px; box-sizing: border-box; background: var(--color-white); border: 1px solid var(--border-light); border-radius: 8px; color: var(--text-secondary); font-size: 11px; line-height: 1.5; overflow-wrap: anywhere; } ._reasonBox_sv0hl_1043 svg { flex-shrink: 0; color: var(--color-primary); } /* ================================================================ EMAIL SUPPRESSION ================================================================ */ ._suppressionRow_sv0hl_1121 { width: 100%; display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); column-gap: 32px; row-gap: 18px; padding-top: 16px; margin-top: 16px; border-top: 1px solid var(--border-light); box-sizing: border-box; } ._suppressionValue_sv0hl_1161 { margin-top: 2px; font-size: 13px; line-height: 1.5; } /* ================================================================ BOOLEAN VALUES ================================================================ */ ._booleanSuccess_sv0hl_1185, ._booleanDanger_sv0hl_1187 { display: inline-flex; align-items: center; gap: 5px; font-size: 13px; font-weight: var(--font-weight-medium); } ._booleanSuccess_sv0hl_1185 { color: var(--color-success); } ._booleanDanger_sv0hl_1187 { color: var(--color-danger); } /* ================================================================ LOADING ================================================================ */ ._loadingCard_sv0hl_1233 { width: 100%; min-height: 260px; display: flex; align-items: center; justify-content: center; gap: 10px; box-sizing: border-box; background: var(--color-white); border: 1px solid var(--border-light); border-radius: 12px; color: var(--text-secondary); font-size: 13px; } ._spinner_sv0hl_1281 { width: 20px; height: 20px; border: 2px solid var(--border-light); border-top-color: var(--color-primary); border-radius: 50%; animation: _contactViewSpin_sv0hl_1 0.7s linear infinite; } @keyframes _contactViewSpin_sv0hl_1 { to { transform: rotate(360deg); } } /* ================================================================ EMPTY STATE ================================================================ */ ._emptyCard_sv0hl_1327 { width: 100%; min-height: 280px; display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 8px; padding: 24px; box-sizing: border-box; background: var(--color-white); border: 1px solid var(--border-light); border-radius: 12px; text-align: center; color: var(--text-secondary); } ._emptyCard_sv0hl_1327 svg { margin-bottom: 4px; color: var(--color-danger); } ._emptyCard_sv0hl_1327 h2 { margin: 0; color: var(--text-primary-dark); font-size: 17px; font-weight: var(--font-weight-semibold); } ._emptyCard_sv0hl_1327 p { max-width: 420px; margin: 0 0 12px; font-size: 12px; line-height: 1.5; } /* ================================================================ IMPORTANT: PREVENT PARENT CONTAINER FROM CUTTING THE CARD ================================================================ */ ._page_sv0hl_9, ._profileCard_sv0hl_205, ._sectionCard_sv0hl_461, ._validationBox_sv0hl_923 { max-width: 100%; } /* ================================================================ TABLET ================================================================ */ @media (max-width: 900px) { ._profileCard_sv0hl_205 { align-items: flex-start; flex-direction: column; } ._profileStatus_sv0hl_417 { align-items: flex-start; } ._detailsGrid_sv0hl_627, ._validationGrid_sv0hl_1007 { grid-template-columns: 1fr; } ._fullWidth_sv0hl_663 { grid-column: auto; } ._suppressionRow_sv0hl_1121 { grid-template-columns: 1fr; } } /* ================================================================ MOBILE ================================================================ */ @media (max-width: 600px) { ._page_sv0hl_9 { padding: 14px 0 28px; gap: 12px; } ._profileCard_sv0hl_205, ._sectionCard_sv0hl_461 { padding: 16px; } ._profileMain_sv0hl_253 { width: 100%; align-items: flex-start; gap: 12px; } ._avatar_sv0hl_271 { width: 50px; height: 50px; flex-basis: 50px; font-size: 16px; } ._profileInfo_sv0hl_313 { min-width: 0; } ._profileInfo_sv0hl_313 h2 { font-size: 16px; } ._profileMeta_sv0hl_357 { flex-direction: column; align-items: flex-start; gap: 5px; } ._sectionHeader_sv0hl_505 { align-items: flex-start; gap: 10px; padding-bottom: 13px; margin-bottom: 14px; } ._sectionIcon_sv0hl_531 { width: 32px; height: 32px; flex-basis: 32px; } ._validationBox_sv0hl_923 { padding: 12px; } ._validationStatus_sv0hl_963 { align-items: flex-start; flex-direction: column; gap: 8px; } ._suppressionRow_sv0hl_1121 { grid-template-columns: 1fr; gap: 14px; } } /* ================================================================ SMALL MOBILE ================================================================ */ @media (max-width: 420px) { ._profileCard_sv0hl_205, ._sectionCard_sv0hl_461 { padding: 13px; } ._avatar_sv0hl_271 { width: 44px; height: 44px; flex-basis: 44px; } ._profileMeta_sv0hl_357 span { font-size: 11px; } ._detailValue_sv0hl_699, ._addressValue_sv0hl_755, ._suppressionValue_sv0hl_1161 { font-size: 12px; } }._campaignDashboardPage_1rka7_1 { width: 100%; min-width: 0; display: flex; flex-direction: column; gap: var(--space-4); padding-top: var(--space-4); padding-bottom: var(--space-4); box-sizing: border-box; background: var(--color-bg-light); color: var(--text-primary-dark); font-family: var(--font-family-base); font-size: var(--font-size-base); } ._pageHeader_1rka7_43 { display: flex; align-items: center; justify-content: space-between; gap: var(--space-4); margin-bottom: var(--space-2); } ._pageHeader_1rka7_43 > div:first-child { min-width: 0; } ._pageTitle_1rka7_63 { margin: 0 0 var(--space-1); color: var(--text-primary-dark); font-size: var(--font-size-2xl); font-weight: var(--font-weight-bold); line-height: 1.25; } ._pageSubtitle_1rka7_77 { margin: 0; color: var(--text-secondary); font-size: var(--font-size-base); line-height: 1.5; } ._headerActions_1rka7_89 { display: flex; align-items: center; justify-content: flex-end; flex-wrap: wrap; gap: var(--space-2); flex-shrink: 0; } ._filtersRow_1rka7_107 { display: flex; align-items: center; flex-wrap: wrap; gap: var(--space-2); margin-bottom: var(--space-3); } ._filterControl_1rka7_121 { min-height: 36px; display: inline-flex; align-items: center; gap: var(--space-2); padding: 0 var(--space-3); border: 1px solid var(--border-light); border-radius: var(--radius-sm); background: var(--color-white); color: var(--text-primary-dark); font-family: inherit; font-size: var(--font-size-sm); font-weight: var(--font-weight-medium); cursor: pointer; } ._filterControl_1rka7_121 svg { flex-shrink: 0; color: var(--text-secondary); } ._filterChevron_1rka7_159 { margin-left: var(--space-1); } /* ============================================================ DATE RANGE DROPDOWN ============================================================ */ ._rangeSelectWrap_1rka7_175 { position: relative; } ._rangeSelectMenu_1rka7_183 { position: absolute; top: calc(100% + 8px); left: 0; z-index: 50; width: 220px; padding: 6px; border: 1px solid var(--border-light); border-radius: 10px; background: var(--color-white); box-shadow: 0 8px 24px rgba(15, 23, 42, 0.1), 0 2px 6px rgba(15, 23, 42, 0.06); } ._rangeOption_1rka7_223 { width: 100%; min-height: 42px; display: flex; align-items: center; justify-content: space-between; gap: var(--space-2); padding: 0 10px; border: 0; border-radius: 7px; background: transparent; color: var(--text-primary-dark); font-family: inherit; font-size: var(--font-size-sm); font-weight: var(--font-weight-medium); text-align: left; cursor: pointer; transition: background 0.15s ease, color 0.15s ease; } ._rangeOption_1rka7_223:hover { background: var(--color-gray-light); } ._rangeOptionActive_1rka7_293 { color: var(--color-primary); background: var(--brand-soft); } ._rangeSelectedIcon_1rka7_303 { flex-shrink: 0; color: var(--color-primary); stroke-width: 2.2; } ._summaryGrid_1rka7_315 { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: var(--space-3); margin-bottom: var(--space-3); } ._summaryCard_1rka7_327 { min-width: 0; min-height: 110px; display: flex; align-items: center; gap: var(--space-3); padding: var(--space-3) var(--space-4); box-sizing: border-box; background: var(--color-white); border: 1px solid var(--border-light); border-radius: var(--radius-lg); box-shadow: var(--shadow-sm); } ._summaryIcon_1rka7_353 { width: 52px; height: 52px; flex: 0 0 52px; display: flex; align-items: center; justify-content: center; border-radius: var(--radius-md); font-size: 24px; box-shadow: var(--shadow-sm); } ._summaryIcon_blue_1rka7_375 { color: var(--color-white); background: linear-gradient(135deg, #1769ff, #2f80ed); } ._summaryIcon_green_1rka7_383 { color: var(--color-white); background: linear-gradient(135deg, #17b26a, #43c885); } ._summaryIcon_orange_1rka7_391 { color: var(--color-white); background: linear-gradient(135deg, #f59e0b, #ffb72e); } ._summaryIcon_purple_1rka7_399 { color: var(--color-white); background: linear-gradient(135deg, #7c3aed, #8b5cf6); } ._summaryIcon_red_1rka7_407 { color: var(--color-white); background: linear-gradient(135deg, #ff3d3d, #ff6b61); } ._summaryContent_1rka7_415 { min-width: 0; display: flex; flex-direction: column; gap: 3px; } ._summaryLabel_1rka7_427 { color: var(--text-primary-dark); font-size: var(--font-size-xs); font-weight: var(--font-weight-semibold); } ._summaryValue_1rka7_437 { color: var(--text-primary-dark); font-size: var(--font-size-2xl); line-height: 1.1; font-weight: var(--font-weight-bold); } ._summaryDescription_1rka7_449 { color: var(--text-secondary); font-size: var(--font-size-xs); line-height: 1.35; } ._channelGrid_1rka7_461 { display: grid; grid-template-columns: minmax(0, 0.95fr) minmax(0, 1fr) minmax(0, 1.2fr); gap: var(--space-3); margin-bottom: var(--space-3); } ._channelCard_1rka7_473 { min-width: 0; padding: var(--space-3); border: 1px solid var(--border-light); border-radius: var(--radius-lg); background: var(--color-white); box-shadow: var(--shadow-sm); } ._smsCard_1rka7_489 { border-color: color-mix( in srgb, var(--color-primary) 48%, var(--border-light) ); } ._voiceCard_1rka7_503 { border-color: #b7a6ff; } ._socialCard_1rka7_509 { border-color: #ff9f9f; } ._channelTitle_1rka7_515 { display: flex; align-items: center; gap: var(--space-2); margin-bottom: var(--space-3); } ._channelTitle_1rka7_515 h2 { margin: 0; font-size: var(--font-size-lg); font-weight: var(--font-weight-bold); } ._channelTitleIcon_1rka7_537 { display: inline-flex; font-size: 22px; } ._blueText_1rka7_545 { color: var(--color-primary); } ._purpleText_1rka7_551 { color: #7c3aed; } ._redText_1rka7_557 { color: var(--color-danger); } ._channelTopMetrics_1rka7_563 { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: var(--space-2); padding-bottom: var(--space-3); border-bottom: 1px solid var(--border-light); } ._socialCard_1rka7_509 ._channelTopMetrics_1rka7_563 { grid-template-columns: repeat(4, minmax(0, 1fr)); } ._channelTopMetrics_1rka7_563 > div, ._channelSecondaryMetrics_1rka7_585 > div:not(._metricDivider_1rka7_585), ._voiceSecondaryGrid_1rka7_587 > div { min-width: 0; display: flex; flex-direction: column; align-items: center; gap: 2px; text-align: center; } ._channelTopMetrics_1rka7_563 strong, ._channelSecondaryMetrics_1rka7_585 strong, ._voiceSecondaryGrid_1rka7_587 strong { color: var(--text-primary-dark); font-size: var(--font-size-lg); font-weight: var(--font-weight-bold); } ._channelTopMetrics_1rka7_563 span, ._channelSecondaryMetrics_1rka7_585 span, ._voiceSecondaryGrid_1rka7_587 span { color: var(--text-secondary); font-size: var(--font-size-xs); } ._channelSecondaryMetrics_1rka7_585 { display: grid; grid-template-columns: 1fr auto 1fr; align-items: center; gap: var(--space-3); padding: var(--space-3) 0; } ._metricDivider_1rka7_585 { width: 1px; height: 34px; background: var(--border-light); } ._voiceSecondaryGrid_1rka7_587 { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: var(--space-2); padding: var(--space-3) 0; } ._infoBanner_1rka7_665 { min-height: 54px; display: flex; align-items: center; justify-content: center; gap: var(--space-2); padding: var(--space-2) var(--space-3); border-radius: var(--radius-md); background: var(--color-gray-light); color: var(--text-secondary); font-size: var(--font-size-sm); } ._socialInfoBanner_1rka7_689 { min-height: 38px; background: color-mix(in srgb, var(--color-danger) 7%, var(--color-white)); } ._statusRow_1rka7_697 { display: flex; align-items: center; flex-wrap: wrap; gap: var(--space-2); margin-top: var(--space-3); } ._statusPill_1rka7_711 { display: inline-flex; align-items: center; min-height: 28px; padding: 0 var(--space-3); border-radius: var(--radius-md); font-size: var(--font-size-xs); font-weight: var(--font-weight-semibold); } ._statusGreen_1rka7_729 { color: #087a4f; background: #e3f7ee; } ._statusBlue_1rka7_737 { color: var(--color-primary); background: var(--brand-soft); } ._statusRed_1rka7_745 { color: var(--color-danger); background: #ffe8e8; } ._statusGray_1rka7_753 { color: var(--text-secondary); background: var(--color-gray-light); } ._callResults_1rka7_763 { margin-top: var(--space-1); } ._callResults_1rka7_763 > span { color: var(--text-primary-dark); font-size: var(--font-size-sm); font-weight: var(--font-weight-medium); } ._segmentBar_1rka7_779 { height: 22px; display: grid; grid-template-columns: 6fr 3fr 10fr; margin-top: var(--space-2); overflow: hidden; border-radius: var(--radius-sm); } ._segmentBar_1rka7_779 > div { display: flex; align-items: center; justify-content: center; color: var(--color-white); font-size: var(--font-size-xs); font-weight: var(--font-weight-semibold); } ._segmentGreen_1rka7_811 { background: #32bf73; } ._segmentOrange_1rka7_817 { background: #ffb21c; } ._segmentRed_1rka7_823 { background: #ff5757; } ._segmentLegend_1rka7_829 { display: flex; align-items: center; justify-content: center; flex-wrap: wrap; gap: var(--space-3); margin-top: var(--space-2); color: var(--text-secondary); font-size: 11px; } ._segmentLegend_1rka7_829 span, ._donutLegend_1rka7_851 span { display: inline-flex; align-items: center; gap: 5px; } ._segmentLegend_1rka7_829 i, ._donutLegend_1rka7_851 i { width: 9px; height: 9px; display: inline-block; border-radius: 3px; } ._legendGreen_1rka7_875 { background: #32bf73; } ._legendOrange_1rka7_881 { background: #ffb21c; } ._legendRed_1rka7_887 { background: #ff5757; } ._legendGray_1rka7_893 { background: #d7d9dd; } ._socialPlatformList_1rka7_901 { display: flex; flex-direction: column; gap: var(--space-2); margin-top: var(--space-2); } ._socialPlatformItem_1rka7_913 { min-height: 38px; display: grid; grid-template-columns: 26px 1fr auto; align-items: center; gap: var(--space-2); padding: 0 var(--space-2); border: 1px solid var(--border-light); border-radius: var(--radius-sm); color: var(--text-secondary); font-size: var(--font-size-xs); } ._socialPlatformItem_1rka7_913 strong { color: var(--text-primary-dark); font-size: var(--font-size-sm); } ._facebookIcon_1rka7_945, ._telegramIcon_1rka7_947 { width: 22px; height: 22px; display: inline-flex; align-items: center; justify-content: center; border-radius: var(--radius-full); color: var(--color-white); } ._facebookIcon_1rka7_945 { background: #1877f2; } ._telegramIcon_1rka7_947 { background: #229ed9; } ._insightGrid_1rka7_979 { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: var(--space-3); margin-bottom: var(--space-3); } ._dataCard_1rka7_991 { min-width: 0; overflow: hidden; background: var(--color-white); border: 1px solid var(--border-light); border-radius: var(--radius-lg); box-shadow: var(--shadow-sm); } ._dataCardHeader_1rka7_1007, ._scheduleHeader_1rka7_1009 { min-height: 42px; display: flex; align-items: center; justify-content: space-between; gap: var(--space-2); padding: 0 var(--space-3); } ._dataCardHeader_1rka7_1007 h2, ._scheduleHeader_1rka7_1009 h2 { margin: 0; color: var(--text-primary-dark); font-size: var(--font-size-sm); font-weight: var(--font-weight-bold); } ._dataCardHeader_1rka7_1007 > span, ._scheduleHeader_1rka7_1009 > span { display: inline-flex; align-items: center; gap: var(--space-1); color: var(--text-secondary); font-size: var(--font-size-xs); } ._barChart_1rka7_1057 { padding: 0 var(--space-3) var(--space-3); } ._barRow_1rka7_1063 { display: grid; grid-template-columns: 100px 1fr 30px; align-items: center; gap: var(--space-2); min-height: 28px; color: var(--text-secondary); font-size: var(--font-size-xs); } ._barRow_1rka7_1063 strong { color: var(--text-primary-dark); font-size: var(--font-size-xs); } ._barTrack_1rka7_1089 { height: 12px; overflow: hidden; background: var(--color-gray-light); border-radius: 2px; } ._barBlue_1rka7_1101, ._barPurple_1rka7_1103, ._barRed_1rka7_1105 { height: 100%; } ._barBlue_1rka7_1101 { background: var(--color-primary); } ._barPurple_1rka7_1103 { background: #7c3aed; } ._barRed_1rka7_1105 { background: #ff5757; } ._barAxis_1rka7_1129 { display: grid; grid-template-columns: repeat(4, 1fr); margin-left: 108px; margin-right: 30px; color: var(--text-muted); font-size: 10px; } ._donutContent_1rka7_1147 { min-height: 120px; display: flex; align-items: center; justify-content: center; gap: var(--space-5); padding: var(--space-2) var(--space-3) var(--space-3); } ._donut_1rka7_851 { width: 92px; height: 92px; flex: 0 0 92px; display: flex; align-items: center; justify-content: center; border-radius: var(--radius-full); } ._outcomeDonut_1rka7_1181 { background: conic-gradient(#32bf73 0 50%, #ffb21c 50% 83%, #ff5757 83% 100%); } ._sentimentDonut_1rka7_1187 { background: conic-gradient(#19a95f 0 67%, #d7d9dd 67% 100%); } ._donutInner_1rka7_1193 { width: 56px; height: 56px; border-radius: var(--radius-full); background: var(--color-white); } ._donutLegend_1rka7_851 { min-width: 150px; display: flex; flex-direction: column; gap: var(--space-2); } ._donutLegend_1rka7_851 > div { display: flex; align-items: center; justify-content: space-between; gap: var(--space-4); color: var(--text-secondary); font-size: var(--font-size-xs); } ._donutLegend_1rka7_851 strong { color: var(--text-primary-dark); } ._bottomGrid_1rka7_1241 { display: grid; grid-template-columns: minmax(0, 1.55fr) minmax(330px, 1fr); gap: var(--space-3); } ._sideColumn_1rka7_1251 { display: flex; flex-direction: column; gap: var(--space-3); } ._tableWrap_1rka7_1261 { overflow-x: auto; } ._activityTable_1rka7_1267 { width: 100%; min-width: 760px; border-collapse: collapse; } ._activityTable_1rka7_1267 th, ._activityTable_1rka7_1267 td { padding: 7px var(--space-3); border-top: 1px solid var(--border-light); color: var(--text-secondary); font-size: var(--font-size-xs); text-align: left; white-space: nowrap; } ._activityTable_1rka7_1267 th { color: var(--text-primary-dark); font-weight: var(--font-weight-semibold); } ._channelBadge_1rka7_1303 { display: inline-flex; align-items: center; justify-content: center; gap: 4px; min-height: 22px; padding: 0 var(--space-2); border-radius: var(--radius-sm); font-size: 11px; font-weight: var(--font-weight-semibold); white-space: nowrap; } ._channelBadge_1rka7_1303 svg { flex-shrink: 0; } ._smsBadge_1rka7_1345 { color: var(--color-primary); background: var(--brand-soft); } ._voiceBadge_1rka7_1353 { color: #6f42d8; background: #f0eaff; } ._socialBadge_1rka7_1361 { color: var(--color-danger); background: #ffe8e8; } ._completedBadge_1rka7_1369 { display: inline-flex; align-items: center; min-height: 22px; padding: 0 var(--space-2); border-radius: var(--radius-sm); color: #087a4f; background: #e3f7ee; font-size: 11px; font-weight: var(--font-weight-semibold); } ._viewButton_1rka7_1391 { display: inline-flex; align-items: center; gap: 4px; padding: 0; border: 0; background: transparent; color: var(--color-primary); font-family: inherit; font-size: var(--font-size-xs); font-weight: var(--font-weight-semibold); cursor: pointer; } ._scheduleList_1rka7_1431 { padding: 0 var(--space-3) var(--space-3); } ._scheduleItem_1rka7_1437 { min-height: 34px; display: grid; grid-template-columns: 52px 1fr auto; align-items: center; gap: var(--space-2); border-top: 1px solid var(--border-light); color: var(--text-secondary); font-size: var(--font-size-xs); } ._scheduleItem_1rka7_1437 strong { color: var(--text-primary-dark); font-weight: var(--font-weight-medium); } ._emptyAlert_1rka7_1465 { min-height: 90px; display: flex; flex-direction: column; align-items: center; justify-content: center; gap: var(--space-2); color: var(--text-secondary); font-size: var(--font-size-sm); } ._emptyAlert_1rka7_1465 svg { color: var(--color-success); font-size: 30px; } @media (max-width: 1500px) { ._summaryGrid_1rka7_315 { grid-template-columns: repeat(3, minmax(0, 1fr)); } ._channelGrid_1rka7_461 { grid-template-columns: repeat(2, minmax(0, 1fr)); } ._socialCard_1rka7_509 { grid-column: 1 / -1; } } @media (max-width: 1200px) { ._summaryGrid_1rka7_315 { grid-template-columns: repeat(2, minmax(0, 1fr)); } ._channelGrid_1rka7_461, ._insightGrid_1rka7_979, ._bottomGrid_1rka7_1241 { grid-template-columns: 1fr; } ._socialCard_1rka7_509 { grid-column: auto; } ._sideColumn_1rka7_1251 { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); } } @media (max-width: 900px) { ._pageHeader_1rka7_43 { align-items: flex-start; flex-direction: column; } ._headerActions_1rka7_89 { width: 100%; justify-content: flex-start; } ._filtersRow_1rka7_107 { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); } ._filterControl_1rka7_121 { justify-content: space-between; } ._sideColumn_1rka7_1251 { grid-template-columns: 1fr; } } @media (max-width: 768px) { ._campaignDashboardPage_1rka7_1 { padding: var(--space-3); } ._headerActions_1rka7_89 { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); } ._headerActions_1rka7_89 .app-btn { width: 100%; } ._summaryGrid_1rka7_315 { grid-template-columns: 1fr; } ._filtersRow_1rka7_107 { grid-template-columns: 1fr; } ._rangeSelectWrap_1rka7_175, ._rangeSelectWrap_1rka7_175 ._filterControl_1rka7_121 { width: 100%; } ._rangeSelectMenu_1rka7_183 { width: 100%; } ._channelTopMetrics_1rka7_563, ._socialCard_1rka7_509 ._channelTopMetrics_1rka7_563 { grid-template-columns: repeat(2, minmax(0, 1fr)); } ._voiceSecondaryGrid_1rka7_587 { grid-template-columns: repeat(2, minmax(0, 1fr)); } ._donutContent_1rka7_1147 { align-items: flex-start; flex-direction: column; } ._donutLegend_1rka7_851 { width: 100%; } ._socialPlatformItem_1rka7_913 { grid-template-columns: 26px 1fr; } ._socialPlatformItem_1rka7_913 > span:last-child { grid-column: 2; } ._scheduleItem_1rka7_1437 { grid-template-columns: 48px 1fr; } ._scheduleItem_1rka7_1437 > span:last-child { grid-column: 2; } } @media (max-width: 480px) { ._pageTitle_1rka7_63 { font-size: var(--font-size-xl); } ._pageSubtitle_1rka7_77 { font-size: var(--font-size-sm); } ._headerActions_1rka7_89 { grid-template-columns: 1fr; } ._summaryCard_1rka7_327 { align-items: flex-start; } ._channelTopMetrics_1rka7_563, ._socialCard_1rka7_509 ._channelTopMetrics_1rka7_563, ._voiceSecondaryGrid_1rka7_587 { grid-template-columns: 1fr 1fr; } ._statusRow_1rka7_697 { align-items: stretch; flex-direction: column; } ._statusPill_1rka7_711 { justify-content: center; } } /* ============================================================ CHART ENTRY ANIMATIONS Added only for: - Call Results segmented bar - Channel Activity bars - Voice Outcomes donut - Voice Sentiment donut ============================================================ */ /* ---------------- CALL RESULTS ---------------- */ ._segmentBar_1rka7_779 > div { transform-origin: left center; animation: _campaignSegmentGrow_1rka7_1 1200ms cubic-bezier(0.22, 1, 0.36, 1) both; } ._segmentBar_1rka7_779 > div:nth-child(1) { animation-delay: 120ms; } ._segmentBar_1rka7_779 > div:nth-child(2) { animation-delay: 500ms; } ._segmentBar_1rka7_779 > div:nth-child(3) { animation-delay: 440ms; } @keyframes _campaignSegmentGrow_1rka7_1 { from { transform: scaleX(0); opacity: 0.35; } to { transform: scaleX(1); opacity: 1; } } /* ---------------- CHANNEL ACTIVITY ---------------- */ ._barBlue_1rka7_1101, ._barPurple_1rka7_1103, ._barRed_1rka7_1105 { transform-origin: left center; animation: _campaignBarGrow_1rka7_1 1400ms cubic-bezier(0.22, 1, 0.36, 1) both; } ._barRow_1rka7_1063:nth-child(1) ._barBlue_1rka7_1101 { animation-delay: 140ms; } ._barRow_1rka7_1063:nth-child(2) ._barPurple_1rka7_1103 { animation-delay: 320ms; } ._barRow_1rka7_1063:nth-child(3) ._barRed_1rka7_1105 { animation-delay: 280ms; } @keyframes _campaignBarGrow_1rka7_1 { from { transform: scaleX(0); opacity: 0.4; } to { transform: scaleX(1); opacity: 1; } } /* ---------------- DONUT CHARTS ---------------- */ ._donut_1rka7_851 { transform-origin: center; animation: _campaignDonutReveal_1rka7_1 1400ms cubic-bezier(0.22, 1, 0.36, 1) both; } ._donutInner_1rka7_1193 { animation: _campaignDonutInnerReveal_1rka7_1 950ms 420ms ease-out both; } @keyframes _campaignDonutReveal_1rka7_1 { 0% { transform: scale(0.55) rotate(-75deg); opacity: 0; } 70% { transform: scale(1.035) rotate(4deg); opacity: 1; } 100% { transform: scale(1) rotate(0deg); opacity: 1; } } @keyframes _campaignDonutInnerReveal_1rka7_1 { from { transform: scale(0.65); opacity: 0; } to { transform: scale(1); opacity: 1; } } /* Respect OS accessibility settings */ @media (prefers-reduced-motion: reduce) { ._segmentBar_1rka7_779 > div, ._barBlue_1rka7_1101, ._barPurple_1rka7_1103, ._barRed_1rka7_1105, ._donut_1rka7_851, ._donutInner_1rka7_1193 { animation: none !important; } } /* ============================================================ CHANNEL COMPARISON Same page spacing pattern as your existing pages ============================================================ */ ._page_1tip2_11 { width: 100%; min-width: 0; display: flex; flex-direction: column; gap: var(--space-4); padding-top: var(--space-4); padding-bottom: var(--space-4); box-sizing: border-box; color: var(--text-primary-dark); background: var(--color-bg-light); font-family: var(--font-family-base); font-size: var(--font-size-base); } /* ============================================================ EXPORT ============================================================ */ ._exportWrapper_1tip2_61 { position: relative; display: inline-flex; } ._exportWrapper_1tip2_61 > button { display: inline-flex; align-items: center; gap: 8px; } ._exportChevronOpen_1tip2_83 { transform: rotate(180deg); } ._exportMenu_1tip2_91 { position: absolute; top: calc(100% + 8px); right: 0; z-index: 1000; width: 245px; padding: 6px; background: #ffffff; border: 1px solid #e5e7eb; border-radius: 12px; box-shadow: 0 14px 35px rgba(15, 23, 42, 0.12), 0 3px 10px rgba(15, 23, 42, 0.06); } ._exportOption_1tip2_127 { width: 100%; display: flex; align-items: center; gap: 12px; padding: 11px 10px; border: 0; border-radius: 9px; background: transparent; text-align: left; cursor: pointer; transition: background 0.15s ease, transform 0.15s ease; } ._exportOption_1tip2_127:hover { background: #f8fafc; } ._exportOption_1tip2_127:active { transform: scale(0.99); } ._exportOptionIcon_1tip2_183 { width: 34px; height: 34px; display: flex; align-items: center; justify-content: center; flex: 0 0 34px; border-radius: 8px; background: #f1f5f9; color: #334155; font-size: 16px; } ._exportOption_1tip2_127 > span:last-child { display: flex; flex-direction: column; gap: 2px; } ._exportOption_1tip2_127 strong { font-size: 13px; font-weight: 600; color: #172033; } ._exportOption_1tip2_127 small { font-size: 11px; color: #7b8494; } ._exportIgnore_1tip2_253 { /* Hidden only during export */ } ._exportingPage_1tip2_261 ._exportIgnore_1tip2_253 { display: none !important; } /* ============================================================ HEADER ============================================================ */ ._pageHeader_1tip2_277 { display: flex; align-items: center; justify-content: space-between; gap: var(--space-4); } ._pageTitle_1tip2_293 { margin: 0 0 var(--space-1); color: var(--text-primary-dark); font-size: var(--font-size-2xl); line-height: 1.25; font-weight: var(--font-weight-bold); } ._pageSubtitle_1tip2_313 { margin: 0; color: var(--text-secondary); font-size: var(--font-size-base); line-height: 1.5; } ._headerActions_1tip2_331 { display: flex; align-items: center; justify-content: flex-end; flex-wrap: wrap; gap: var(--space-2); flex-shrink: 0; } /* ============================================================ CONTROLS ============================================================ */ ._controlsRow_1tip2_361 { display: flex; align-items: center; justify-content: flex-start; gap: var(--space-3); flex-wrap: wrap; } ._filterGroup_1tip2_381 { display: flex; align-items: center; flex-wrap: wrap; gap: var(--space-2); } ._filterControl_1tip2_397 { min-height: 36px; display: inline-flex; align-items: center; gap: var(--space-2); padding: 0 var(--space-3); border: 1px solid var(--border-light); border-radius: var(--radius-sm); background: var(--color-white); color: var(--text-primary-dark); font-family: inherit; font-size: var(--font-size-sm); font-weight: var(--font-weight-medium); cursor: pointer; } ._compareToggleWrap_1tip2_443 { min-height: 36px; display: inline-flex; align-items: center; gap: var(--space-2); padding-left: var(--space-2); color: var(--text-secondary); font-size: var(--font-size-sm); white-space: nowrap; } /* ============================================================ TOGGLE ============================================================ */ ._toggle_1tip2_483 { position: relative; width: 38px; height: 22px; padding: 0; border: 0; border-radius: var(--radius-full); background: var(--border-medium); cursor: pointer; } ._toggle_1tip2_483 span { position: absolute; top: 3px; left: 3px; width: 16px; height: 16px; border-radius: var(--radius-full); background: var(--color-white); box-shadow: var(--shadow-sm); transition: left 0.15s ease; } ._toggleOn_1tip2_551 { background: var(--color-danger); } ._toggleOn_1tip2_551 span { left: 19px; } /* ============================================================ PERIOD BANNER ============================================================ */ ._periodBanner_1tip2_575 { min-height: 34px; display: flex; align-items: center; justify-content: center; flex-wrap: wrap; gap: var(--space-2); padding: var(--space-1) var(--space-3); border: 1px solid color-mix(in srgb, var(--color-primary) 32%, var(--border-light)); border-radius: var(--radius-sm); background: var(--brand-soft); color: var(--text-primary-dark); font-size: var(--font-size-sm); } ._periodBanner_1tip2_575 svg { color: var(--color-primary); } ._vsBadge_1tip2_629 { width: 28px; height: 28px; display: inline-flex; align-items: center; justify-content: center; border: 1px solid var(--border-light); border-radius: var(--radius-full); background: var(--color-white); color: var(--text-secondary); font-size: 11px; font-weight: var(--font-weight-semibold); } /* ============================================================ SUMMARY ============================================================ */ ._summaryGrid_1tip2_675 { display: grid; grid-template-columns: repeat(5, minmax(0, 1fr)); gap: var(--space-3); } ._summaryCard_1tip2_689 { min-width: 0; min-height: 92px; display: flex; align-items: center; gap: var(--space-3); padding: var(--space-3); border: 1px solid var(--border-light); border-radius: var(--radius-lg); background: var(--color-white); box-shadow: var(--shadow-sm); } ._summaryIcon_1tip2_727 { width: 46px; height: 46px; flex: 0 0 46px; display: inline-flex; align-items: center; justify-content: center; border-radius: var(--radius-full); font-size: 22px; } ._summary_blue_1tip2_757 { color: var(--color-primary); background: var(--brand-soft); } ._summary_green_1tip2_767 { color: var(--color-success); background: color-mix(in srgb, var(--color-success) 11%, var(--color-white)); } ._summary_purple_1tip2_777 { color: #7c3aed; background: #f1eaff; } ._summary_red_1tip2_787, ._summary_redSoft_1tip2_789 { color: var(--color-danger); background: color-mix(in srgb, var(--color-danger) 10%, var(--color-white)); } ._summaryCard_1tip2_689 > div { min-width: 0; display: flex; flex-direction: column; gap: 2px; } ._summaryLabel_1tip2_817 { color: var(--text-primary-dark); font-size: var(--font-size-xs); font-weight: var(--font-weight-medium); } ._summaryValue_1tip2_831 { color: var(--text-primary-dark); font-size: var(--font-size-xl); line-height: 1.15; font-weight: var(--font-weight-bold); } ._summaryDescription_1tip2_847 { color: var(--text-secondary); font-size: var(--font-size-xs); } /* ============================================================ COMPARISON GRID ============================================================ */ ._comparisonGrid_1tip2_867 { display: grid; grid-template-columns: minmax(0, 0.95fr) minmax(0, 1.25fr); gap: var(--space-3); } ._comparisonCard_1tip2_887, ._dataCard_1tip2_889 { min-width: 0; overflow: hidden; border: 1px solid var(--border-light); border-radius: var(--radius-lg); background: var(--color-white); box-shadow: var(--shadow-sm); } ._smsCard_1tip2_915 { border-color: color-mix( in srgb, var(--color-primary) 50%, var(--border-light) ); } ._voiceCard_1tip2_931 { border-color: #9d70ec; } ._cardHeader_1tip2_939 { min-height: 46px; display: flex; align-items: center; padding: 0 var(--space-3); } ._cardHeader_1tip2_939 > div { display: flex; align-items: center; gap: var(--space-2); } ._cardHeader_1tip2_939 h2, ._sectionTitleRow_1tip2_973 h2 { margin: 0; color: var(--text-primary-dark); font-size: var(--font-size-sm); font-weight: var(--font-weight-bold); } ._smsCard_1tip2_915 ._cardHeader_1tip2_939 h2 { color: var(--color-primary); } ._voiceCard_1tip2_931 ._cardHeader_1tip2_939 h2 { color: #6f42d8; } ._cardHeaderIcon_1tip2_1007 { width: 26px; height: 26px; display: inline-flex; align-items: center; justify-content: center; border-radius: var(--radius-sm); } ._smsHeaderIcon_1tip2_1029 { color: var(--color-white); background: var(--color-primary); } ._voiceHeaderIcon_1tip2_1039 { color: #6f42d8; background: #f1eaff; } /* ============================================================ COMPARISON TABLE ============================================================ */ ._comparisonTable_1tip2_1057 { padding: 0 var(--space-3); } ._comparisonHeader_1tip2_1065, ._comparisonRow_1tip2_1067 { display: grid; grid-template-columns: minmax(130px, 1.5fr) minmax(70px, 0.65fr) minmax(70px, 0.65fr) minmax(92px, 0.9fr); align-items: center; gap: var(--space-2); min-height: 32px; border-top: 1px solid var(--border-light); font-size: var(--font-size-xs); } ._comparisonHeader_1tip2_1065 { min-height: 28px; border-top: 0; color: var(--text-secondary); font-size: 11px; font-weight: var(--font-weight-semibold); } ._comparisonRow_1tip2_1067 > span:first-child { color: var(--text-primary-dark); } ._comparisonRow_1tip2_1067 > strong { color: var(--text-primary-dark); font-weight: var(--font-weight-semibold); } ._changeBadge_1tip2_1149 { min-height: 21px; display: inline-flex; align-items: center; justify-content: center; padding: 0 var(--space-2); border-radius: var(--radius-sm); font-size: 10px; font-weight: var(--font-weight-semibold); white-space: nowrap; } ._changePositive_1tip2_1183 { color: #087a4f; background: #e5f8ee; border: 1px solid #b9ebcf; } ._changePurple_1tip2_1197 { color: #6f42d8; background: #f1eaff; border: 1px solid #ddcdfc; } ._changeNeutral_1tip2_1211 { color: var(--text-secondary); background: var(--color-gray-light); border: 1px solid var(--border-light); } /* ============================================================ SMS FOOTER ============================================================ */ ._infoStrip_1tip2_1233 { min-height: 34px; display: flex; align-items: center; gap: var(--space-2); margin: var(--space-2) var(--space-3); padding: 0 var(--space-2); border: 1px solid color-mix(in srgb, var(--color-primary) 30%, var(--border-light)); border-radius: var(--radius-sm); color: var(--text-secondary); background: var(--brand-soft); font-size: 11px; } ._infoStrip_1tip2_1233 svg { color: var(--color-primary); } ._cardFooter_1tip2_1287 { min-height: 34px; display: flex; align-items: center; gap: var(--space-2); padding: 0 var(--space-3); border-top: 1px solid var(--border-light); color: var(--color-primary); font-size: var(--font-size-sm); font-weight: var(--font-weight-medium); } ._cardFooter_1tip2_1287 svg { width: 18px; height: 18px; padding: 3px; border-radius: var(--radius-full); color: var(--color-white); background: var(--color-primary); } /* ============================================================ VOICE SIDE STATS ============================================================ */ ._voiceComparisonBody_1tip2_1355 { display: grid; grid-template-columns: minmax(0, 1fr) minmax(175px, 0.45fr); gap: var(--space-3); padding-right: var(--space-3); } ._voiceSideStats_1tip2_1379 { display: flex; flex-direction: column; gap: var(--space-2); } ._sideStatBox_1tip2_1393 { padding: var(--space-2); border: 1px solid var(--border-light); border-radius: var(--radius-md); background: var(--color-white); } ._sideStatBox_1tip2_1393 h3 { margin: 0 0 var(--space-2); color: var(--text-primary-dark); font-size: var(--font-size-xs); font-weight: var(--font-weight-semibold); } ._sideStatRow_1tip2_1429 { min-height: 24px; display: flex; align-items: center; justify-content: space-between; gap: var(--space-2); color: var(--text-secondary); font-size: 11px; } ._sideStatRow_1tip2_1429 span { display: inline-flex; align-items: center; gap: 6px; } ._sideStatRow_1tip2_1429 strong { color: var(--text-primary-dark); } /* ============================================================ DOTS ============================================================ */ ._greenDot_1tip2_1487, ._orangeDot_1tip2_1489, ._redDot_1tip2_1491, ._grayDot_1tip2_1493, ._blueDot_1tip2_1495, ._purpleDot_1tip2_1497 { width: 9px; height: 9px; display: inline-block; border-radius: var(--radius-full); } ._greenDot_1tip2_1487 { background: #4bb56c; } ._orangeDot_1tip2_1489 { background: #f7a928; } ._redDot_1tip2_1491 { background: #e84a45; } ._grayDot_1tip2_1493 { background: #c9ccd2; } ._blueDot_1tip2_1495 { background: var(--color-primary); } ._purpleDot_1tip2_1497 { background: #7c3aed; } /* ============================================================ CHARTS ============================================================ */ ._chartGrid_1tip2_1571 { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: var(--space-3); } ._sectionTitleRow_1tip2_973 { min-height: 42px; display: flex; align-items: center; padding: 0 var(--space-3); } ._barChart_1tip2_1603 { padding: 0 var(--space-3) var(--space-3); } ._chartLegend_1tip2_1611 { display: flex; justify-content: center; flex-wrap: wrap; gap: var(--space-4); margin-bottom: var(--space-2); color: var(--text-secondary); font-size: 11px; } ._chartLegend_1tip2_1611 span { display: inline-flex; align-items: center; gap: 5px; } ._chartLegend_1tip2_1611 i { width: 10px; height: 10px; display: inline-block; border-radius: 2px; } ._blueLegend_1tip2_1671 { background: var(--color-primary); } ._purpleLegend_1tip2_1679 { background: #7c3aed; } ._chartPlot_1tip2_1687 { min-height: 180px; display: grid; grid-template-columns: 30px 1fr; gap: var(--space-2); } ._yAxis_1tip2_1707 { display: flex; flex-direction: column; justify-content: space-between; padding: 7px 0 26px; color: var(--text-muted); font-size: 10px; text-align: right; } ._chartBars_1tip2_1735 { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: var(--space-3); align-items: end; border-left: 1px solid var(--border-light); border-bottom: 1px solid var(--border-light); } ._barGroup_1tip2_1759 { min-width: 0; display: flex; flex-direction: column; justify-content: flex-end; gap: var(--space-1); height: 100%; } ._barPair_1tip2_1783 { height: 145px; display: flex; align-items: flex-end; justify-content: center; gap: 6px; } ._barColumn_1tip2_1803 { width: 32%; height: 100%; display: flex; flex-direction: column; justify-content: flex-end; align-items: center; } ._barColumn_1tip2_1803 > span { margin-bottom: 3px; color: var(--text-primary-dark); font-size: 10px; } ._bar_1tip2_1603 { width: 100%; min-height: 2px; border-radius: 2px 2px 0 0; } ._blueBar_1tip2_1857 { background: linear-gradient(to top, #1a5fd8, var(--color-primary)); } ._purpleBar_1tip2_1865 { background: linear-gradient(to top, #6f42c1, #8b5cf6); } ._barGroup_1tip2_1759 small { color: var(--text-secondary); font-size: 10px; text-align: center; } /* ============================================================ INSIGHT GRID ============================================================ */ ._insightGrid_1tip2_1897 { display: grid; grid-template-columns: minmax(0, 0.9fr) minmax(0, 0.9fr) minmax(0, 1.15fr); gap: var(--space-3); } /* ============================================================ DONUT ============================================================ */ ._donutContent_1tip2_1927 { min-height: 120px; display: flex; align-items: center; gap: var(--space-4); padding: 0 var(--space-3) var(--space-3); } ._donut_1tip2_1927 { width: 100px; height: 100px; flex: 0 0 100px; display: flex; align-items: center; justify-content: center; border-radius: var(--radius-full); } ._outcomeDonut_1tip2_1975 { background: conic-gradient(#4bb56c 0 50%, #f7a928 50% 83%, #e84a45 83% 100%); } ._sentimentDonut_1tip2_1983 { background: conic-gradient(#4bb56c 0 67%, #c9ccd2 67% 100%); } ._donutInner_1tip2_1991 { width: 62px; height: 62px; display: flex; align-items: center; justify-content: space-around; border-radius: var(--radius-full); background: var(--color-white); color: var(--text-secondary); font-size: 11px; } ._donutLegend_1tip2_2025 { flex: 1; display: flex; flex-direction: column; gap: var(--space-2); } ._donutLegend_1tip2_2025 > div { display: flex; align-items: center; justify-content: space-between; gap: var(--space-3); color: var(--text-secondary); font-size: 11px; } ._donutLegend_1tip2_2025 span { display: inline-flex; align-items: center; gap: 6px; } ._donutLegend_1tip2_2025 strong { color: var(--text-primary-dark); } /* ============================================================ PERFORMANCE ============================================================ */ ._performanceCard_1tip2_2097 { border-color: #d8c8f7; } ._performanceHeader_1tip2_2105 { min-height: 42px; display: flex; align-items: center; justify-content: space-between; gap: var(--space-2); padding: 0 var(--space-3); } ._performanceHeader_1tip2_2105 > div { display: flex; align-items: center; gap: var(--space-2); } ._performanceHeader_1tip2_2105 svg { color: #7c3aed; } ._performanceHeader_1tip2_2105 h2 { margin: 0; color: #6f42d8; font-size: var(--font-size-sm); font-weight: var(--font-weight-bold); } ._performanceHeader_1tip2_2105 > span { padding: 3px 8px; border-radius: var(--radius-sm); background: #f1eaff; color: var(--text-secondary); font-size: 10px; } ._insightList_1tip2_2193 { display: flex; flex-direction: column; gap: var(--space-2); padding: 0 var(--space-3) var(--space-3); } ._insightList_1tip2_2193 > div { display: flex; align-items: center; gap: var(--space-2); color: var(--text-primary-dark); font-size: var(--font-size-xs); } ._insightPositive_1tip2_2233 { flex-shrink: 0; color: var(--color-success); } ._insightWarning_1tip2_2245 { flex-shrink: 0; color: #ef6c00; } /* ============================================================ TABLE ============================================================ */ ._tableWrap_1tip2_2265 { overflow-x: auto; } ._activityTable_1tip2_2273 { width: 100%; min-width: 860px; border-collapse: collapse; } ._activityTable_1tip2_2273 th, ._activityTable_1tip2_2273 td { padding: 7px var(--space-3); border-top: 1px solid var(--border-light); color: var(--text-secondary); font-size: var(--font-size-xs); text-align: left; white-space: nowrap; } ._activityTable_1tip2_2273 th { color: var(--text-primary-dark); font-weight: var(--font-weight-semibold); } ._channelBadge_1tip2_2329 { min-height: 21px; display: inline-flex; align-items: center; justify-content: center; gap: 4px; padding: 0 var(--space-2); border-radius: var(--radius-sm); font-size: 10px; font-weight: var(--font-weight-semibold); white-space: nowrap; } ._channelBadge_1tip2_2329 svg { flex-shrink: 0; } ._smsBadge_1tip2_2375 { color: var(--color-primary); background: var(--brand-soft); } ._voiceBadge_1tip2_2385 { color: #6f42d8; background: #f1eaff; } ._completedBadge_1tip2_2395 { min-height: 21px; display: inline-flex; align-items: center; gap: 4px; padding: 0 var(--space-2); border-radius: var(--radius-sm); color: #087a4f; background: #e5f8ee; font-size: 10px; font-weight: var(--font-weight-semibold); } ._viewButton_1tip2_2433 { display: inline-flex; align-items: center; gap: 4px; padding: 0; border: 0; background: transparent; color: var(--color-primary); font-family: inherit; font-size: var(--font-size-xs); font-weight: var(--font-weight-semibold); cursor: pointer; } ._viewButton_1tip2_2433 svg { flex-shrink: 0; } /* ============================================================ RESPONSIVE ============================================================ */ @media (max-width: 1450px) { ._summaryGrid_1tip2_675 { grid-template-columns: repeat(3, minmax(0, 1fr)); } ._comparisonGrid_1tip2_867 { grid-template-columns: 1fr; } } @media (max-width: 1200px) { ._chartGrid_1tip2_1571, ._insightGrid_1tip2_1897 { grid-template-columns: 1fr; } ._voiceComparisonBody_1tip2_1355 { grid-template-columns: 1fr; padding-right: 0; } ._voiceSideStats_1tip2_1379 { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); padding: 0 var(--space-3) var(--space-3); } } @media (max-width: 900px) { ._pageHeader_1tip2_277 { align-items: flex-start; flex-direction: column; } ._headerActions_1tip2_331 { width: 100%; justify-content: flex-start; } ._controlsRow_1tip2_361 { align-items: stretch; flex-direction: column; } ._summaryGrid_1tip2_675 { grid-template-columns: repeat(2, minmax(0, 1fr)); } ._filterGroup_1tip2_381 { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); width: 100%; } ._filterControl_1tip2_397 { justify-content: space-between; } } @media (max-width: 768px) { ._summaryGrid_1tip2_675 { grid-template-columns: 1fr; } ._filterGroup_1tip2_381 { display: grid; grid-template-columns: 1fr; } ._compareToggleWrap_1tip2_443 { width: 100%; justify-content: space-between; padding: 0; } ._headerActions_1tip2_331 { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); width: 100%; } ._headerActions_1tip2_331 .app-btn { width: 100%; } ._compareToggleWrap_1tip2_443 { justify-content: flex-start; } ._comparisonHeader_1tip2_1065, ._comparisonRow_1tip2_1067 { min-width: 520px; } ._comparisonTable_1tip2_1057 { overflow-x: auto; } ._voiceSideStats_1tip2_1379 { grid-template-columns: 1fr; } ._chartPlot_1tip2_1687 { min-width: 520px; } ._barChart_1tip2_1603 { overflow-x: auto; } ._donutContent_1tip2_1927 { align-items: flex-start; flex-direction: column; } ._donutLegend_1tip2_2025 { width: 100%; } } @media (max-width: 480px) { ._headerActions_1tip2_331 { grid-template-columns: 1fr; } ._pageTitle_1tip2_293 { font-size: var(--font-size-xl); } ._pageSubtitle_1tip2_313 { font-size: var(--font-size-sm); } ._periodBanner_1tip2_575 { justify-content: flex-start; } ._summaryCard_1tip2_689 { align-items: flex-start; } } /* ============================================================ CHANNEL MULTI SELECT ============================================================ */ ._channelSelectWrap_1tip2_2795 { position: relative; } ._channelSelectMenu_1tip2_2803 { position: absolute; top: calc(100% + var(--space-2)); left: 0; z-index: 50; width: 220px; padding: var(--space-2); border: 1px solid var(--border-light); border-radius: var(--radius-md); background: var(--color-white); box-shadow: var(--shadow-md); } ._channelSelectHint_1tip2_2837 { padding: var(--space-2); color: var(--text-muted); font-size: var(--font-size-xs); font-weight: var(--font-weight-medium); } ._channelOption_1tip2_2855 { width: 100%; min-height: 36px; display: flex; align-items: center; gap: var(--space-2); padding: 0 var(--space-2); border: 0; border-radius: var(--radius-sm); background: transparent; color: var(--text-primary-dark); font-family: inherit; font-size: var(--font-size-sm); cursor: pointer; text-align: left; } ._channelOption_1tip2_2855:hover { background: var(--color-gray-light); } ._channelOptionLocked_1tip2_2913 { cursor: not-allowed; } ._channelCheck_1tip2_2921 { width: 17px; height: 17px; display: inline-flex; align-items: center; justify-content: center; flex-shrink: 0; border: 1px solid var(--border-medium); border-radius: 4px; color: var(--color-white); background: var(--color-white); } ._channelCheckActive_1tip2_2955 { border-color: var(--color-primary); background: var(--color-primary); } ._channelCheck_1tip2_2921 svg { width: 12px; height: 12px; } /* ============================================================ API STATE ============================================================ */ ._stateMessage_1tip2_2983 { min-height: 38px; display: flex; align-items: center; gap: var(--space-2); padding: 0 var(--space-3); border: 1px solid var(--border-light); border-radius: var(--radius-sm); background: var(--color-white); color: var(--text-secondary); font-size: var(--font-size-sm); } /* ============================================================ EXTRA CHANNEL / CHANGE STYLES ============================================================ */ ._changeNegative_1tip2_3029 { color: var(--color-danger); background: color-mix(in srgb, var(--color-danger) 9%, var(--color-white)); border: 1px solid color-mix(in srgb, var(--color-danger) 22%, var(--border-light)); } ._socialCard_1tip2_3045 { border-color: color-mix( in srgb, var(--color-danger) 45%, var(--border-light) ); } ._socialHeaderIcon_1tip2_3061 { color: var(--color-danger); background: color-mix(in srgb, var(--color-danger) 10%, var(--color-white)); } ._socialBadge_1tip2_3071 { color: var(--color-danger); background: color-mix(in srgb, var(--color-danger) 10%, var(--color-white)); } ._orangeLegend_1tip2_3081 { background: var(--color-warning); } ._orangeBar_1tip2_3089 { background: linear-gradient(to top, #e99a00, var(--color-warning)); } /* Active compare toggle uses theme blue */ ._toggleOn_1tip2_551 { background: var(--color-primary); } @media (max-width: 768px) { ._channelSelectWrap_1tip2_2795, ._channelSelectWrap_1tip2_2795 ._filterControl_1tip2_397 { width: 100%; } ._channelSelectMenu_1tip2_2803 { width: 100%; } } /* ============================================================ DATE RANGE SELECT ============================================================ */ ._rangeSelectWrap_1tip2_3137 { position: relative; } ._rangeSelectMenu_1tip2_3145 { position: absolute; top: calc(100% + var(--space-2)); left: 0; z-index: 50; width: 180px; padding: var(--space-1); border: 1px solid var(--border-light); border-radius: var(--radius-md); background: var(--color-white); box-shadow: var(--shadow-md); } ._rangeOption_1tip2_3179 { width: 100%; min-height: 36px; display: flex; align-items: center; justify-content: space-between; gap: var(--space-2); padding: 0 var(--space-2); border: 0; border-radius: var(--radius-sm); background: transparent; color: var(--text-primary-dark); font-family: inherit; font-size: var(--font-size-sm); font-weight: var(--font-weight-medium); text-align: left; cursor: pointer; } ._rangeOption_1tip2_3179:hover { background: var(--color-gray-light); } ._rangeOptionActive_1tip2_3241 { color: var(--color-primary); background: var(--brand-soft); } ._rangeOption_1tip2_3179 svg { flex-shrink: 0; color: var(--color-primary); } @media (max-width: 768px) { ._rangeSelectWrap_1tip2_3137, ._rangeSelectWrap_1tip2_3137 ._filterControl_1tip2_397 { width: 100%; } ._rangeSelectMenu_1tip2_3145 { width: 100%; } } /* ========================================================= CompetitorReportsList.module.css ========================================================= */ ._reportsPage_boz8i_9 { width: 100%; min-height: 100%; padding: 15px 10px; background: #f8fafc; box-sizing: border-box; } ._reportsPageHeader_boz8i_25 { display: flex; flex-direction: column; gap: 20px; margin-bottom: 24px; } ._reportsBackButton_boz8i_39 { display: inline-flex; align-items: center; gap: 8px; width: fit-content; padding: 0; border: 0; background: transparent; color: #64748b; font-size: 13px; font-weight: 600; cursor: pointer; transition: color 0.2s ease; } ._reportsBackButton_boz8i_39:hover { color: #2563eb; } ._reportsTitleRow_boz8i_77 { display: flex; align-items: center; gap: 14px; } ._reportsTitleIcon_boz8i_89 { display: flex; align-items: center; justify-content: center; width: 46px; height: 46px; flex: 0 0 46px; border-radius: 12px; background: #eff6ff; color: #2563eb; } ._reportsTitleRow_boz8i_77 h1 { margin: 0; color: #0f172a; font-size: 24px; line-height: 1.25; font-weight: 700; } ._reportsTitleRow_boz8i_77 p { margin: 5px 0 0; color: #64748b; font-size: 13px; line-height: 1.5; } ._reportsTableWrapper_boz8i_143 { width: 100%; min-width: 0; background: #ffffff; border: 1px solid #e2e8f0; border-radius: 14px; overflow: hidden; } /* --------------------------------------------------------- Table title --------------------------------------------------------- */ ._reportTableTitle_boz8i_169 { display: flex; align-items: center; gap: 11px; min-width: 0; } ._reportTableIcon_boz8i_183 { display: flex; align-items: center; justify-content: center; width: 34px; height: 34px; flex: 0 0 34px; border-radius: 9px; background: #eff6ff; color: #2563eb; } ._reportTableTitleContent_boz8i_207 { display: flex; flex-direction: column; gap: 4px; min-width: 0; } ._reportTableTitleRow_boz8i_221 { display: flex; align-items: center; gap: 8px; min-width: 0; } ._reportTableTitleRow_boz8i_221 strong { max-width: 100%; overflow: hidden; color: #0f172a; font-size: 13px; font-weight: 650; line-height: 1.35; text-overflow: ellipsis; white-space: nowrap; } ._reportPlatform_boz8i_257 { display: inline-flex; align-items: center; width: fit-content; padding: 3px 7px; border-radius: 6px; background: #f1f5f9; color: #64748b; font-size: 10px; font-weight: 600; line-height: 1; text-transform: capitalize; } ._reportTableSummary_boz8i_285 { display: block; max-width: 480px; overflow: hidden; color: #94a3b8; font-size: 11px; line-height: 1.4; text-overflow: ellipsis; white-space: nowrap; } /* --------------------------------------------------------- Period --------------------------------------------------------- */ ._reportTablePeriod_boz8i_315 { display: flex; align-items: center; gap: 7px; color: #64748b; font-size: 12px; line-height: 1.4; } ._reportTablePeriod_boz8i_315 svg { flex: 0 0 auto; color: #94a3b8; } /* --------------------------------------------------------- Score --------------------------------------------------------- */ ._reportTableScore_boz8i_351 { display: inline-flex; align-items: center; gap: 7px; color: #16a34a; font-size: 13px; } ._reportTableScore_boz8i_351 svg { color: #22c55e; } ._reportTableScore_boz8i_351 strong { color: #0f172a; font-size: 13px; font-weight: 700; } /* --------------------------------------------------------- Created --------------------------------------------------------- */ ._reportTableCreated_boz8i_395 { color: #64748b; font-size: 12px; white-space: nowrap; } /* --------------------------------------------------------- View button --------------------------------------------------------- */ ._reportTableViewButton_boz8i_415 { display: inline-flex; align-items: center; justify-content: center; gap: 4px; min-height: 32px; padding: 6px 10px; border: 1px solid #dbeafe; border-radius: 12px; background: #eff6ff; color: #2563eb; font-size: 11px; font-weight: 650; cursor: pointer; transition: background 0.2s ease, border-color 0.2s ease, color 0.2s ease, transform 0.15s ease; } ._reportTableViewButton_boz8i_415:hover { background: #dbeafe; border-color: #bfdbfe; color: #1d4ed8; } ._reportTableViewButton_boz8i_415:active { transform: translateY(1px); } ._reportTableViewButton_boz8i_415 svg { transition: transform 0.2s ease; } /* --------------------------------------------------------- Responsive --------------------------------------------------------- */ @media (max-width: 768px) { ._reportsPage_boz8i_9 { padding: 16px; } ._reportsTitleRow_boz8i_77 h1 { font-size: 21px; } ._reportsTableWrapper_boz8i_143 { border-radius: 10px; } ._reportTableSummary_boz8i_285 { max-width: 280px; } } @media (max-width: 520px) { ._reportsPage_boz8i_9 { padding: 12px; } ._reportsTitleRow_boz8i_77 { align-items: flex-start; } ._reportsTitleIcon_boz8i_89 { width: 40px; height: 40px; flex-basis: 40px; } ._reportsTitleRow_boz8i_77 h1 { font-size: 19px; } ._reportsTitleRow_boz8i_77 p { font-size: 12px; } } /* ========================================================= CompetitorReportView.module.css ========================================================= */ ._reportViewPage_1pnem_9 { width: 100%; min-height: 100%; padding: 15px 10px; background: #f8fafc; box-sizing: border-box; } /* --------------------------------------------------------- Loading --------------------------------------------------------- */ ._reportViewLoading_1pnem_33 { display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 10px; min-height: calc(100vh - 120px); color: #64748b; font-size: 13px; } ._reportViewLoading_1pnem_33 svg { color: #2563eb; } ._spin_1pnem_63 { animation: _spin_1pnem_63 0.9s linear infinite; } @keyframes _spin_1pnem_63 { to { transform: rotate(360deg); } } /* --------------------------------------------------------- Empty --------------------------------------------------------- */ ._reportViewEmpty_1pnem_91 { display: flex; flex-direction: column; align-items: center; justify-content: center; min-height: calc(100vh - 120px); padding: 40px; text-align: center; color: #64748b; } ._reportViewEmpty_1pnem_91 svg { margin-bottom: 12px; color: #94a3b8; } ._reportViewEmpty_1pnem_91 h3 { margin: 0 0 14px; color: #0f172a; font-size: 18px; } ._reportViewEmpty_1pnem_91 button { display: inline-flex; align-items: center; justify-content: center; min-height: 36px; padding: 8px 14px; border: 1px solid #dbeafe; border-radius: 8px; background: #eff6ff; color: #2563eb; font-size: 12px; font-weight: 650; cursor: pointer; } /* --------------------------------------------------------- Header --------------------------------------------------------- */ ._reportViewHeader_1pnem_173 { display: flex; align-items: flex-end; justify-content: space-between; gap: 20px; margin-bottom: 24px; } ._reportsBackButton_1pnem_189 { display: inline-flex; align-items: center; gap: 8px; margin-bottom: 16px; padding: 0; border: 0; background: transparent; color: #64748b; font-size: 13px; font-weight: 600; cursor: pointer; transition: color 0.2s ease; } ._reportsBackButton_1pnem_189:hover { color: #2563eb; } ._reportViewTitleRow_1pnem_227 { display: flex; align-items: center; gap: 14px; } ._reportsTitleIcon_1pnem_239 { display: flex; align-items: center; justify-content: center; width: 46px; height: 46px; flex: 0 0 46px; border-radius: 12px; background: #eff6ff; color: #2563eb; } ._reportViewTitleRow_1pnem_227 h1 { margin: 0; color: #0f172a; font-size: 24px; line-height: 1.25; font-weight: 700; } ._reportViewTitleRow_1pnem_227 p { margin: 5px 0 0; color: #64748b; font-size: 13px; } ._reportScoreBadge_1pnem_291 { display: inline-flex; align-items: center; gap: 7px; padding: 9px 13px; border: 1px solid #dcfce7; border-radius: 9px; background: #f0fdf4; color: #15803d; font-size: 12px; font-weight: 700; white-space: nowrap; } ._reportScoreBadge_1pnem_291 svg { color: #16a34a; } /* --------------------------------------------------------- Summary --------------------------------------------------------- */ ._reportSummaryCard_1pnem_335 { display: flex; align-items: flex-start; gap: 14px; margin-bottom: 24px; padding: 18px; border: 1px solid #dbeafe; border-radius: 14px; background: #ffffff; box-shadow: 0 1px 2px rgba(15, 23, 42, 0.03); } ._reportSectionIcon_1pnem_359 { display: flex; align-items: center; justify-content: center; width: 38px; height: 38px; flex: 0 0 38px; border-radius: 9px; background: #eff6ff; color: #2563eb; } ._reportSummaryCard_1pnem_335 > div:last-child { min-width: 0; } ._reportSummaryCard_1pnem_335 > div:last-child > span { display: block; margin-bottom: 5px; color: #0f172a; font-size: 13px; font-weight: 700; } ._reportSummaryCard_1pnem_335 p { margin: 0; color: #64748b; font-size: 13px; line-height: 1.65; } /* --------------------------------------------------------- Sections --------------------------------------------------------- */ ._reportViewSection_1pnem_429 { margin-bottom: 24px; padding: 20px; border: 1px solid #e2e8f0; border-radius: 14px; background: #ffffff; box-shadow: 0 1px 2px rgba(15, 23, 42, 0.025); } ._reportViewSectionHeader_1pnem_447 { display: flex; align-items: center; justify-content: space-between; margin-bottom: 18px; } ._reportViewSectionHeader_1pnem_447 h2 { margin: 0; color: #0f172a; font-size: 16px; font-weight: 700; } ._reportViewSectionHeader_1pnem_447 span { display: block; margin-top: 4px; color: #94a3b8; font-size: 11px; } /* --------------------------------------------------------- Benchmark cards --------------------------------------------------------- */ ._reportBenchmarkGrid_1pnem_497 { display: grid; grid-template-columns: repeat(6, minmax(0, 1fr)); gap: 12px; } ._reportBenchmarkCard_1pnem_509 { min-width: 0; padding: 15px; border: 1px solid #eef2f7; border-radius: 10px; background: #f8fafc; } ._reportBenchmarkCard_1pnem_509 span { display: block; margin-bottom: 8px; color: #64748b; font-size: 11px; line-height: 1.35; } ._reportBenchmarkCard_1pnem_509 strong { display: block; color: #0f172a; font-size: 18px; font-weight: 700; } /* --------------------------------------------------------- Competitor table --------------------------------------------------------- */ ._reportCompetitorTable_1pnem_563 { width: 100%; overflow-x: auto; border: 1px solid #e2e8f0; border-radius: 10px; } ._reportTableHeader_1pnem_577, ._reportTableRow_1pnem_579 { display: grid; grid-template-columns: minmax(180px, 1.7fr) repeat(5, minmax(90px, 1fr)); min-width: 760px; align-items: center; } ._reportTableHeader_1pnem_577 { padding: 11px 14px; background: #f8fafc; border-bottom: 1px solid #e2e8f0; } ._reportTableHeader_1pnem_577 span { color: #64748b; font-size: 10px; font-weight: 700; text-transform: uppercase; letter-spacing: 0.04em; } ._reportTableRow_1pnem_579 { padding: 14px; border-bottom: 1px solid #f1f5f9; } ._reportTableRow_1pnem_579:last-child { border-bottom: 0; } ._reportTableRow_1pnem_579 > div { display: flex; flex-direction: column; gap: 3px; min-width: 0; } ._reportTableRow_1pnem_579 strong { overflow: hidden; color: #0f172a; font-size: 12px; font-weight: 650; text-overflow: ellipsis; white-space: nowrap; } ._reportTableRow_1pnem_579 > div span { color: #94a3b8; font-size: 10px; } ._reportTableRow_1pnem_579 > span { color: #475569; font-size: 12px; font-weight: 550; } /* --------------------------------------------------------- Average --------------------------------------------------------- */ ._reportAverageRow_1pnem_701 { display: flex; align-items: center; gap: 24px; margin-top: 12px; padding: 12px 14px; border-radius: 9px; background: #f8fafc; } ._reportAverageRow_1pnem_701 strong { margin-right: auto; color: #0f172a; font-size: 12px; } ._reportAverageRow_1pnem_701 span { color: #64748b; font-size: 11px; } /* --------------------------------------------------------- Recommendations --------------------------------------------------------- */ ._reportRecommendations_1pnem_751 { display: flex; flex-direction: column; gap: 10px; } ._reportRecommendationCard_1pnem_763 { display: grid; grid-template-columns: 32px minmax(0, 1fr); gap: 12px; padding: 14px; border: 1px solid #e2e8f0; border-radius: 10px; background: #ffffff; } ._reportRecommendationNumber_1pnem_783 { display: flex; align-items: center; justify-content: center; width: 28px; height: 28px; border-radius: 8px; background: #eff6ff; color: #2563eb; font-size: 11px; font-weight: 700; } ._reportRecommendationTop_1pnem_809 { display: flex; align-items: center; gap: 8px; margin-bottom: 6px; } ._reportRecommendationTop_1pnem_809 strong { color: #0f172a; font-size: 13px; } ._reportRecommendationTop_1pnem_809 span { display: inline-flex; align-items: center; padding: 3px 7px; border-radius: 5px; font-size: 9px; font-weight: 700; text-transform: uppercase; } /* Priority states */ ._priorityHigh_1pnem_857 { background: #fef2f2; color: #dc2626; } ._priorityMedium_1pnem_867 { background: #fffbeb; color: #d97706; } ._priorityLow_1pnem_877 { background: #f0fdf4; color: #16a34a; } ._reportRecommendationAction_1pnem_887 { margin: 0 0 5px; color: #334155; font-size: 12px; font-weight: 600; line-height: 1.5; } ._reportRecommendationWhy_1pnem_903 { margin: 0; color: #94a3b8; font-size: 11px; line-height: 1.5; } /* --------------------------------------------------------- Content plan --------------------------------------------------------- */ ._reportContentPlan_1pnem_925 { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 12px; } ._reportContentPlanCard_1pnem_937 { display: grid; grid-template-columns: 30px minmax(0, 1fr); gap: 12px; padding: 14px; border: 1px solid #e2e8f0; border-radius: 10px; background: #ffffff; } ._reportContentPlanNumber_1pnem_957 { display: flex; align-items: center; justify-content: center; width: 28px; height: 28px; border-radius: 8px; background: #f1f5f9; color: #475569; font-size: 11px; font-weight: 700; } ._reportContentPlanCard_1pnem_937 h3 { margin: 0 0 8px; color: #0f172a; font-size: 13px; line-height: 1.45; } ._reportContentPlanMeta_1pnem_997 { display: flex; flex-wrap: wrap; gap: 6px; margin-bottom: 8px; } ._reportContentPlanMeta_1pnem_997 span { padding: 4px 7px; border-radius: 5px; background: #f8fafc; color: #64748b; font-size: 9px; font-weight: 600; } ._reportContentPlanCard_1pnem_937 p { margin: 0; color: #94a3b8; font-size: 11px; line-height: 1.55; } /* --------------------------------------------------------- Created --------------------------------------------------------- */ ._reportCreatedAt_1pnem_1051 { display: flex; align-items: center; justify-content: flex-end; gap: 6px; padding: 4px 2px 12px; color: #94a3b8; font-size: 11px; } ._reportCreatedAt_1pnem_1051 svg { flex: 0 0 auto; } /* --------------------------------------------------------- Responsive --------------------------------------------------------- */ @media (max-width: 1200px) { ._reportBenchmarkGrid_1pnem_497 { grid-template-columns: repeat(3, minmax(0, 1fr)); } } @media (max-width: 800px) { ._reportViewPage_1pnem_9 { padding: 16px; } ._reportViewHeader_1pnem_173 { align-items: flex-start; flex-direction: column; } ._reportScoreBadge_1pnem_291 { align-self: flex-start; } ._reportContentPlan_1pnem_925 { grid-template-columns: 1fr; } } @media (max-width: 600px) { ._reportViewPage_1pnem_9 { padding: 12px; } ._reportViewSection_1pnem_429 { padding: 14px; border-radius: 10px; } ._reportBenchmarkGrid_1pnem_497 { grid-template-columns: repeat(2, minmax(0, 1fr)); } ._reportSummaryCard_1pnem_335 { padding: 14px; } ._reportViewTitleRow_1pnem_227 h1 { font-size: 20px; } ._reportAverageRow_1pnem_701 { align-items: flex-start; flex-direction: column; gap: 6px; } ._reportAverageRow_1pnem_701 strong { margin-right: 0; } } @media (max-width: 400px) { ._reportBenchmarkGrid_1pnem_497 { grid-template-columns: 1fr; } } /* VideoCutList.module.css - Styles matching Yuaa AI Dashboard & AI Video Shorts */ :root { --primary-red: #ff3b30; --primary-red-hover: #e02d23; --primary-red-soft: #fff1f0; --purple-ai: #7047eb; --purple-ai-bg: #f3effe; --blue-normal: #2563eb; --blue-normal-bg: #eff6ff; --green-ready: #16a34a; --green-ready-bg: #f0fdf4; --amber-warn: #d97706; --amber-warn-bg: #fffbeb; --border-color: #eaecf0; --text-main: #101828; --text-muted: #667085; --bg-page: #f8fafc; --bg-card: #ffffff; } ._appLayout_hqs7a_43 { display: flex; min-height: 100vh; background-color: #f8fafc; font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif; color: #101828; } /* Sidebar */ ._sidebar_hqs7a_65 { width: 240px; background: #ffffff; border-right: 1px solid #eaecf0; display: flex; flex-direction: column; flex-shrink: 0; position: sticky; top: 0; height: 100vh; z-index: 20; } ._sidebarHeader_hqs7a_91 { padding: 24px 20px; display: flex; align-items: center; gap: 12px; } ._logoIcon_hqs7a_105 { width: 36px; height: 36px; border-radius: 8px; background: #ff3b30; color: #ffffff; display: flex; align-items: center; justify-content: center; font-weight: 900; font-size: 20px; letter-spacing: -1px; } ._logoText_hqs7a_133 { display: flex; flex-direction: column; } ._logoTitle_hqs7a_143 { font-size: 16px; font-weight: 700; color: #101828; line-height: 1.2; } ._logoSub_hqs7a_157 { font-size: 12px; color: #667085; } ._navSection_hqs7a_167 { flex: 1; padding: 12px 14px; display: flex; flex-direction: column; gap: 4px; overflow-y: auto; } ._navItem_hqs7a_185 { display: flex; align-items: center; gap: 12px; padding: 10px 14px; border-radius: 8px; font-size: 14px; font-weight: 500; color: #475467; text-decoration: none; background: transparent; border: none; width: 100%; cursor: pointer; transition: all 0.15s ease; } ._navItem_hqs7a_185:hover { background: #f8fafc; color: #101828; } ._navItemActive_hqs7a_229 { background: #fff1f0; color: #ff3b30; font-weight: 600; } ._navIcon_hqs7a_241 { width: 18px; height: 18px; flex-shrink: 0; } ._sidebarFooter_hqs7a_253 { padding: 16px 20px; border-top: 1px solid #eaecf0; } ._collapseBtn_hqs7a_263 { background: transparent; border: 1px solid #eaecf0; border-radius: 8px; width: 32px; height: 32px; display: flex; align-items: center; justify-content: center; color: #667085; cursor: pointer; } ._collapseBtn_hqs7a_263:hover { background: #f8fafc; color: #101828; } /* Main Content Area */ ._mainContent_hqs7a_301 { flex: 1; padding: 32px 40px; max-width: 1360px; margin: 0 auto; width: 100%; box-sizing: border-box; } /* Header */ ._pageHeader_hqs7a_321 { display: flex; justify-content: space-between; align-items: flex-start; margin-bottom: 24px; } ._breadcrumb_hqs7a_335 { display: flex; align-items: center; gap: 8px; font-size: 13px; color: #ff3b30; font-weight: 500; margin-bottom: 6px; } ._breadcrumbSep_hqs7a_355 { color: #98a2b3; } ._breadcrumbActive_hqs7a_363 { color: #475467; } ._pageTitle_hqs7a_371 { font-size: 26px; font-weight: 700; color: #101828; margin: 0 0 4px 0; letter-spacing: -0.02em; } ._pageSubtitle_hqs7a_387 { font-size: 14px; color: #667085; margin: 0; } ._headerActions_hqs7a_399 { display: flex; align-items: center; gap: 12px; } ._btnSecondary_hqs7a_411 { display: inline-flex; align-items: center; gap: 8px; padding: 9px 11px; background: #ffffff; border: 1px solid #d0d5dd; border-radius: 8px; font-size: 14px; font-weight: 600; color: #344054; cursor: pointer; transition: all 0.15s ease; box-shadow: 0 1px 2px rgba(16, 24, 40, 0.05); } ._btnSecondary_hqs7a_411:hover { background: #f9fafb; border-color: #98a2b3; } ._btnPrimary_hqs7a_453 { display: inline-flex; align-items: center; gap: 8px; padding: 9px 18px; background: #ff3b30; border: 1px solid #ff3b30; border-radius: 8px; font-size: 14px; font-weight: 600; color: #ffffff; cursor: pointer; transition: all 0.15s ease; box-shadow: 0 1px 3px rgba(255, 59, 48, 0.25); } ._btnPrimary_hqs7a_453:hover { background: #e02d23; border-color: #e02d23; } /* Cards & Layout */ ._card_hqs7a_497 { background: #ffffff; border: 1px solid #eaecf0; border-radius: 14px; padding: 20px; margin-bottom: 24px; box-shadow: 0 1px 3px rgba(16, 24, 40, 0.04); } ._cardHeader_hqs7a_515 { display: flex; justify-content: space-between; align-items: center; margin-bottom: 18px; } ._cardTitle_hqs7a_529 { font-size: 16px; font-weight: 700; color: #101828; display: flex; align-items: center; gap: 8px; margin: 0; } ._cardSubtitle_hqs7a_549 { font-size: 13px; color: #667085; margin: 4px 0 0 0; } /* Metric Cards in Video History (List.png) */ ._metricsGrid_hqs7a_563 { display: grid; grid-template-columns: repeat(4, 1fr) 1.5fr; gap: 16px; margin-bottom: 24px; } ._metricCard_hqs7a_577 { background: #ffffff; border: 1px solid #eaecf0; border-radius: 12px; padding: 18px 20px; display: flex; align-items: center; gap: 16px; box-shadow: 0 1px 2px rgba(16, 24, 40, 0.03); } ._metricIconWrap_hqs7a_599 { width: 44px; height: 44px; border-radius: 10px; display: flex; align-items: center; justify-content: center; flex-shrink: 0; } ._iconRed_hqs7a_619 { background: #fff1f0; color: #ff3b30; } ._iconPurple_hqs7a_629 { background: #f3effe; color: #7047eb; } ._iconBlue_hqs7a_639 { background: #eff6ff; color: #2563eb; } ._iconAmber_hqs7a_649 { background: #fffbeb; color: #d97706; } ._metricInfo_hqs7a_659 { display: flex; flex-direction: column; } ._metricLabel_hqs7a_669 { font-size: 12px; font-weight: 500; color: #667085; margin-bottom: 2px; } ._metricValue_hqs7a_683 { font-size: 24px; font-weight: 700; color: #101828; line-height: 1.1; } ._storageCard_hqs7a_697 { background: #ffffff; border: 1px solid #eaecf0; border-radius: 12px; padding: 16px 20px; display: flex; flex-direction: column; justify-content: center; } ._storageHeader_hqs7a_717 { display: flex; justify-content: space-between; align-items: center; margin-bottom: 6px; } ._storageTitle_hqs7a_731 { font-size: 13px; font-weight: 600; color: #344054; } ._storageUsageText_hqs7a_743 { font-size: 12px; color: #667085; } ._storageProgressBg_hqs7a_753 { height: 6px; background: #f2f4f7; border-radius: 6px; overflow: hidden; margin: 6px 0 8px 0; } ._storageProgressBar_hqs7a_769 { height: 100%; background: #ff3b30; border-radius: 6px; } ._storageManageLink_hqs7a_781 { font-size: 12px; font-weight: 600; color: #2563eb; text-decoration: none; cursor: pointer; display: inline-flex; align-items: center; gap: 4px; } /* Filters bar (List.png) */ ._filterBar_hqs7a_805 { display: flex; align-items: center; justify-content: space-between; gap: 12px; margin-bottom: 16px; flex-wrap: wrap; } ._searchBox_hqs7a_823 { position: relative; flex: 1; min-width: 240px; max-width: 320px; } ._searchIcon_hqs7a_837 { position: absolute; left: 12px; top: 50%; transform: translateY(-50%); color: #98a2b3; width: 16px; height: 16px; } ._searchInput_hqs7a_857 { width: 100%; padding: 8px 12px 8px 36px; background: #ffffff; border: 1px solid #d0d5dd; border-radius: 8px; font-size: 13px; color: #101828; outline: none; box-sizing: border-box; } ._searchInput_hqs7a_857:focus { border-color: #ff3b30; box-shadow: 0 0 0 3px rgba(255, 59, 48, 0.12); } ._filterControls_hqs7a_891 { display: flex; align-items: center; gap: 10px; flex-wrap: wrap; } ._selectDropdown_hqs7a_905 { padding: 8px 12px; background: #ffffff; border: 1px solid #d0d5dd; border-radius: 8px; font-size: 13px; color: #344054; cursor: pointer; outline: none; } ._iconBtn_hqs7a_927 { background: #ffffff; border: 1px solid #d0d5dd; border-radius: 8px; padding: 8px; display: inline-flex; align-items: center; justify-content: center; color: #667085; cursor: pointer; } ._iconBtn_hqs7a_927:hover { background: #f9fafb; color: #101828; } ._iconBtnActive_hqs7a_961 { background: #fff1f0; border-color: #ff3b30; color: #ff3b30; } /* Tables */ ._tableContainer_hqs7a_975 { background: #ffffff; border: 1px solid #eaecf0; border-radius: 12px; overflow: hidden; box-shadow: 0 1px 2px rgba(16, 24, 40, 0.03); } ._table_hqs7a_975 { width: 100%; border-collapse: collapse; text-align: left; font-size: 13px; } ._table_hqs7a_975 th { background: #f9fafb; padding: 12px 16px; font-weight: 600; color: #475467; border-bottom: 1px solid #eaecf0; white-space: nowrap; } ._table_hqs7a_975 td { padding: 14px 16px; border-bottom: 1px solid #eaecf0; color: #344054; vertical-align: middle; } ._table_hqs7a_975 tr:last-child td { border-bottom: none; } ._table_hqs7a_975 tr:hover td { background-color: #fafbfc; } /* Video Cell with thumbnail */ ._videoCell_hqs7a_1055 { display: flex; align-items: center; gap: 12px; } ._videoThumb_hqs7a_1067 { width: 72px; height: 44px; border-radius: 6px; object-fit: cover; background: #1e293b; flex-shrink: 0; } ._videoCellMeta_hqs7a_1085 { display: flex; flex-direction: column; } ._videoCellTitle_hqs7a_1095 { font-weight: 600; color: #101828; font-size: 13px; } ._videoCellSize_hqs7a_1107 { font-size: 11px; color: #667085; } /* Badges */ ._badge_hqs7a_1119 { display: inline-flex; align-items: center; gap: 5px; padding: 3px 8px; border-radius: 6px; font-size: 12px; font-weight: 500; white-space: nowrap; } ._badgeAi_hqs7a_1141 { background: #f3effe; color: #7047eb; } ._badgeNormal_hqs7a_1151 { background: #eff6ff; color: #2563eb; } ._badgeReady_hqs7a_1161 { background: #f0fdf4; color: #16a34a; } ._badgeFailed_hqs7a_1171 { background: #fef2f2; color: #dc2626; } ._badgeQueued_hqs7a_1181 { background: #f2f4f7; color: #667085; } ._badgeProcessing_hqs7a_1191 { background: #eff6ff; color: #2563eb; } ._statusDot_hqs7a_1201 { width: 6px; height: 6px; border-radius: 50%; display: inline-block; } ._dotGreen_hqs7a_1215 { background: #16a34a; } ._dotRed_hqs7a_1223 { background: #dc2626; } ._dotGrey_hqs7a_1231 { background: #98a2b3; } ._dotBlue_hqs7a_1239 { background: #2563eb; } /* Progress bar inside table cell */ ._cellProgressWrap_hqs7a_1249 { display: flex; flex-direction: column; gap: 4px; width: 110px; } ._cellProgressBar_hqs7a_1263 { height: 5px; background: #e2e8f0; border-radius: 4px; overflow: hidden; } ._cellProgressFill_hqs7a_1277 { height: 100%; background: #7047eb; border-radius: 4px; } /* Action buttons in Table */ ._actionBtns_hqs7a_1291 { display: flex; align-items: center; gap: 8px; } ._actionBtnText_hqs7a_1303 { background: transparent; border: 1px solid #d0d5dd; border-radius: 6px; padding: 4px 10px; font-size: 12px; font-weight: 500; color: #344054; cursor: pointer; } ._actionBtnText_hqs7a_1303:hover { background: #f9fafb; } ._actionBtnIcon_hqs7a_1333 { background: transparent; border: none; color: #667085; cursor: pointer; padding: 4px; border-radius: 4px; display: flex; align-items: center; } ._actionBtnIcon_hqs7a_1333:hover { color: #101828; background: #f2f4f7; } /* Pagination */ ._paginationBar_hqs7a_1367 { display: flex; justify-content: space-between; align-items: center; padding: 14px 20px; border-top: 1px solid #eaecf0; background: #ffffff; font-size: 13px; color: #475467; } ._paginationControls_hqs7a_1389 { display: flex; align-items: center; gap: 4px; } ._pageBtn_hqs7a_1401 { min-width: 32px; height: 32px; border-radius: 6px; border: 1px solid #d0d5dd; background: #ffffff; color: #344054; font-size: 13px; font-weight: 500; display: flex; align-items: center; justify-content: center; cursor: pointer; padding: 0 6px; } ._pageBtn_hqs7a_1401:hover { background: #f9fafb; } ._pageBtnActive_hqs7a_1441 { background: #ff3b30; border-color: #ff3b30; color: #ffffff; } /* SOURCE VIDEO CARD (Add.png) */ ._sourceVideoCard_hqs7a_1455 { background: #ffffff; border: 1px solid #eaecf0; border-radius: 14px; padding: 24px; margin-bottom: 24px; } ._sourceVideoFlex_hqs7a_1471 { display: flex; gap: 24px; align-items: stretch; } ._sourcePlayerWrap_hqs7a_1483 { width: 440px; max-width: 50%; position: relative; border-radius: 10px; overflow: hidden; background: #000000; aspect-ratio: 16/9; flex-shrink: 0; } ._sourceVideoElement_hqs7a_1505 { width: 100%; height: 100%; object-fit: cover; display: block; } ._sourceVideoMeta_hqs7a_1519 { flex: 1; display: flex; flex-direction: column; justify-content: space-between; } ._sourceVideoMetaTop_hqs7a_1533 { display: flex; justify-content: space-between; align-items: flex-start; } ._sourceVideoFilename_hqs7a_1545 { font-size: 17px; font-weight: 700; color: #101828; margin: 0 0 16px 0; } ._videoReadyBadge_hqs7a_1559 { display: inline-flex; align-items: center; gap: 6px; background: #f0fdf4; color: #16a34a; border: 1px solid #bbf7d0; padding: 4px 10px; border-radius: 20px; font-size: 12px; font-weight: 600; } ._videoSpecsGrid_hqs7a_1585 { display: grid; grid-template-columns: repeat(4, 1fr); gap: 16px; margin-bottom: 20px; } ._specItem_hqs7a_1599 { display: flex; align-items: flex-start; gap: 10px; } ._specIcon_hqs7a_1611 { color: #667085; width: 18px; height: 18px; margin-top: 2px; } ._specLabel_hqs7a_1625 { font-size: 11px; color: #667085; text-transform: capitalize; } ._specValue_hqs7a_1637 { font-size: 13px; font-weight: 600; color: #101828; } ._sourceActionButtons_hqs7a_1649 { display: flex; align-items: center; gap: 12px; margin-top: auto; } /* SELECT VIDEO CLIPS SECTION (Add.png) */ ._clipTimeInputWrap_hqs7a_1665 { display: inline-flex; align-items: center; background: #ffffff; border: 1px solid #d0d5dd; border-radius: 6px; padding: 4px 8px; gap: 4px; } ._clipTimeInput_hqs7a_1665 { width: 58px; border: none; background: transparent; font-family: monospace; font-size: 12px; color: #101828; text-align: center; outline: none; } ._clipDurationText_hqs7a_1707 { font-weight: 500; color: #475467; } ._clipPlayBtn_hqs7a_1717 { background: transparent; border: 1px solid #d0d5dd; border-radius: 50%; width: 28px; height: 28px; display: inline-flex; align-items: center; justify-content: center; color: #475467; cursor: pointer; } ._clipPlayBtn_hqs7a_1717:hover { background: #f2f4f7; color: #ff3b30; border-color: #ff3b30; } ._clipTrashBtn_hqs7a_1755 { background: transparent; border: none; color: #98a2b3; cursor: pointer; padding: 6px; } ._clipTrashBtn_hqs7a_1755:hover { color: #dc2626; } ._clipsFooterSummary_hqs7a_1779 { padding: 12px 16px; font-size: 13px; font-weight: 600; color: #2563eb; background: #f8fafc; border-top: 1px solid #eaecf0; } /* CHOOSE CUTTING METHOD (Add.png) */ ._cuttingMethodsRow_hqs7a_1799 { display: flex; align-items: center; justify-content: space-between; gap: 20px; margin-bottom: 12px; } ._methodsOptions_hqs7a_1815 { display: flex; gap: 16px; flex: 1; } ._methodCard_hqs7a_1827 { flex: 1; border: 1.5px solid #eaecf0; border-radius: 12px; padding: 16px 20px; display: flex; align-items: flex-start; gap: 14px; cursor: pointer; background: #ffffff; transition: all 0.15s ease; position: relative; } ._methodCardSelected_hqs7a_1855 { border-color: #7047eb; background: #faf8ff; box-shadow: 0 0 0 1px #7047eb; } ._methodCardNormalSelected_hqs7a_1867 { border-color: #2563eb; background: #f0f7ff; box-shadow: 0 0 0 1px #2563eb; } ._methodRadio_hqs7a_1879 { margin-top: 3px; accent-color: #7047eb; width: 18px; height: 18px; cursor: pointer; } ._methodIcon_hqs7a_1895 { width: 18px; height: 18px; color: #7047eb; flex-shrink: 0; } ._methodContent_hqs7a_1909 { flex: 1; } ._methodTitleRow_hqs7a_1917 { display: flex; align-items: center; gap: 8px; margin-bottom: 4px; } ._methodTitle_hqs7a_1917 { font-size: 15px; font-weight: 700; color: #101828; } ._recommendedTag_hqs7a_1943 { background: #f3effe; color: #7047eb; font-size: 11px; font-weight: 600; padding: 2px 8px; border-radius: 12px; } ._methodDesc_hqs7a_1961 { font-size: 12px; color: #667085; line-height: 1.4; margin: 0; } ._btnCutVideos_hqs7a_1975 { background: #ff3b30; color: #ffffff; border: none; border-radius: 10px; padding: 14px 28px; font-size: 15px; font-weight: 700; display: inline-flex; align-items: center; gap: 10px; cursor: pointer; box-shadow: 0 2px 6px rgba(255, 59, 48, 0.3); white-space: nowrap; transition: background 0.15s ease; } ._btnCutVideos_hqs7a_1975:hover { background: #e02d23; } ._methodNotice_hqs7a_2017 { font-size: 12px; color: #667085; display: flex; align-items: center; gap: 6px; } /* READY VIDEOS GRID (Add.png) */ ._readyGrid_hqs7a_2035 { display: grid; grid-template-columns: repeat(4, 1fr); gap: 16px; } ._readyCard_hqs7a_2047 { background: #ffffff; border: 1px solid #eaecf0; border-radius: 12px; overflow: hidden; box-shadow: 0 1px 3px rgba(16, 24, 40, 0.04); display: flex; flex-direction: column; } ._readyCardThumbWrap_hqs7a_2067 { position: relative; width: 100%; aspect-ratio: 16/10; background: #0f172a; overflow: hidden; } ._readyCardThumb_hqs7a_2067 { width: 100%; height: 100%; object-fit: cover; } ._readyBadgeOverlay_hqs7a_2095 { position: absolute; top: 8px; right: 8px; background: rgba(240, 253, 244, 0.9); color: #16a34a; font-size: 11px; font-weight: 600; padding: 2px 8px; border-radius: 12px; display: flex; align-items: center; gap: 4px; } ._readyCardBody_hqs7a_2125 { padding: 14px; flex: 1; display: flex; flex-direction: column; } ._readyShortHeader_hqs7a_2139 { display: flex; align-items: center; justify-content: space-between; margin-bottom: 4px; } ._readyShortNumber_hqs7a_2153 { font-size: 12px; font-weight: 700; color: #ff3b30; } ._readyCardTitle_hqs7a_2165 { font-size: 13px; font-weight: 600; color: #101828; margin: 0 0 10px 0; line-height: 1.35; min-height: 36px; } ._readyCardMeta_hqs7a_2183 { display: flex; align-items: center; gap: 8px; margin-top: auto; margin-bottom: 12px; font-size: 12px; color: #667085; } ._readyCardButtons_hqs7a_2203 { display: grid; grid-template-columns: 1fr 1fr; gap: 8px; border-top: 1px solid #f2f4f7; padding-top: 10px; } ._readyBtn_hqs7a_2219 { display: flex; align-items: center; justify-content: center; gap: 6px; padding: 7px; font-size: 12px; font-weight: 600; border-radius: 6px; cursor: pointer; background: #ffffff; border: 1px solid #d0d5dd; color: #344054; } ._readyBtn_hqs7a_2219:hover { background: #f9fafb; } /* MODAL STYLES */ ._modalBackdrop_hqs7a_2259 { position: fixed; inset: 0; background: rgba(16, 24, 40, 0.75); backdrop-filter: blur(4px); z-index: 2147483647; /* guaranteed above any sidebar/layout z-index */ display: flex; align-items: center; justify-content: center; padding: 20px; } ._modalBox_hqs7a_2285 { background: #ffffff; border-radius: 16px; width: 100%; max-width: 280px; /* small modal instead of 560px */ overflow: hidden; box-shadow: 0 20px 25px -5px rgba(0, 0, 0, 0.15), 0 10px 10px -5px rgba(0, 0, 0, 0.06); } ._modalHeader_hqs7a_2309 { padding: 7px; border-bottom: 1px solid #eaecf0; display: flex; align-items: center; justify-content: space-between; } ._modalTitle_hqs7a_2325 { font-size: 16px; font-weight: 700; color: #101828; margin: 0; } ._modalCloseBtn_hqs7a_2339 { background: transparent; border: none; font-size: 20px; color: #667085; cursor: pointer; } ._modalBody_hqs7a_2355 { padding: 20px 24px; } ._modalFooter_hqs7a_2363 { padding: 7px; border-top: 1px solid #eaecf0; background: #f8fafc; display: flex; justify-content: flex-end; gap: 10px; } /* Responsive */ @media (max-width: 1024px) { ._metricsGrid_hqs7a_563 { grid-template-columns: repeat(2, 1fr); } ._readyGrid_hqs7a_2035 { grid-template-columns: repeat(2, 1fr); } ._sourceVideoFlex_hqs7a_1471 { flex-direction: column; } ._sourcePlayerWrap_hqs7a_1483 { max-width: 100%; width: 100%; } } @media (max-width: 768px) { ._appLayout_hqs7a_43 { flex-direction: column; } ._sidebar_hqs7a_65 { width: 100%; height: auto; position: static; } ._mainContent_hqs7a_301 { padding: 16px; } ._readyGrid_hqs7a_2035 { grid-template-columns: 1fr; } } /* ================================================================= STYLES FOR USER'S UPLOAD & 9:16 NORMAL CUT COMPONENT ================================================================= */ ._page_hqs7a_321 { padding: 10px; max-width: 1360px; margin: 0 auto; width: 100%; box-sizing: border-box; } ._pageHead_hqs7a_321 { display: flex; justify-content: space-between; align-items: flex-start; margin-bottom: 24px; } ._title_hqs7a_2499 { font-size: 15px; font-weight: 700; color: #101828; margin: 0 0 6px 0; letter-spacing: -0.02em; } ._subtitle_hqs7a_2515 { font-size: 10px; color: #667085; margin: 0; } ._btn_hqs7a_411 { display: inline-flex; align-items: center; gap: 8px; border-radius: 8px; font-size: 10px; font-weight: 600; cursor: pointer; transition: all 0.15s ease; } ._btnSmall_hqs7a_2549 { padding: 6px 12px; font-size: 12px; } ._cardHeadRow_hqs7a_2559 { display: flex; justify-content: space-between; align-items: center; margin-bottom: 18px; } ._cardHeadLeft_hqs7a_2573 { font-size: 12px; font-weight: 700; color: #101828; display: flex; align-items: center; gap: 8px; } ._readyPill_hqs7a_2591 { display: inline-flex; align-items: center; gap: 6px; background: #f0fdf4; color: #16a34a; border: 1px solid #bbf7d0; padding: 4px 10px; border-radius: 20px; font-size: 10px; font-weight: 600; } ._sourceRow_hqs7a_2617 { display: flex; gap: 24px; align-items: stretch; } ._playerWrap_hqs7a_2629 { width: 360px; max-width: 50%; position: relative; border-radius: 10px; overflow: hidden; background: #000000; aspect-ratio: 16/9; flex-shrink: 0; display: flex; align-items: center; justify-content: center; } ._playerWrap_hqs7a_2629 video { width: 100%; height: 100%; object-fit: cover; display: block; } ._dropzone_hqs7a_2671 { border: 2px dashed #d0d5dd; border-radius: 10px; width: 100%; height: 100%; display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 12px; padding: 24px; color: #667085; cursor: pointer; text-align: center; background: #fcfcfd; transition: all 0.2s ease; } ._dropzone_hqs7a_2671:hover { border-color: #ff3b30; background: #fff1f0; color: #ff3b30; } ._videoInfoCol_hqs7a_2719 { flex: 1; display: flex; flex-direction: column; justify-content: space-between; } ._videoName_hqs7a_2733 { font-size: 12px; font-weight: 700; color: #101828; margin: 0 0 16px 0; word-break: break-all; } ._infoGrid_hqs7a_2749 { display: grid; grid-template-columns: repeat(4, 1fr); gap: 16px; margin-bottom: 20px; } ._infoItem_hqs7a_2763 { display: flex; align-items: flex-start; gap: 10px; font-size: 9px; color: #667085; } ._infoItem_hqs7a_2763 b { display: block; font-size: 10px; font-weight: 600; color: #101828; margin-top: 2px; } ._videoInfoActions_hqs7a_2795 { display: flex; align-items: center; gap: 12px; margin-top: 3px; } ._clipsToolbar_hqs7a_2809 { display: flex; justify-content: space-between; align-items: flex-start; margin-bottom: 18px; gap: 16px; flex-wrap: wrap; } ._clipsHeading_hqs7a_2827 { font-size: 12px; font-weight: 700; color: #101828; margin: 0 0 4px 0; } ._clipsSub_hqs7a_2841 { font-size: 10px; color: #667085; margin: 0; } ._toolbarRight_hqs7a_2853 { display: flex; align-items: center; gap: 12px; } ._emptyClips_hqs7a_2865 { padding: 32px 20px; text-align: center; color: #667085; font-size: 14px; background: #f8fafc; border-radius: 8px; border: 1px dashed #d0d5dd; } ._tableScroll_hqs7a_2885 { overflow-x: auto; } ._clipsTable_hqs7a_2893 { width: 100%; border-collapse: collapse; font-size: 13px; } ._clipsTable_hqs7a_2893 th { background: #f9fafb; padding: 5px 10px; text-align: left; font-weight: 600; font-size: 11px; color: #475467; border-bottom: 1px solid #eaecf0; } ._clipsTable_hqs7a_2893 td { padding: 10px 14px; border-bottom: 1px solid #eaecf0; vertical-align: middle; } ._checkbox_hqs7a_2937 { width: 16px; height: 16px; accent-color: #ff3b30; cursor: pointer; } ._clipNameInput_hqs7a_2951 { width: 100%; min-width: 180px; padding: 6px 10px; border: 1px solid #d0d5dd; border-radius: 6px; font-size: 10px; font-weight: 500; color: #101828; outline: none; } ._clipNameInput_hqs7a_2951:focus { border-color: #ff3b30; } ._timeInput_hqs7a_2983 { width: 72px; padding: 6px 8px; border: 1px solid #d0d5dd; border-radius: 6px; font-family: monospace; font-size: 10px; color: #101828; text-align: center; outline: none; } ._timeInput_hqs7a_2983:focus { border-color: #ff3b30; } ._roundIconBtn_hqs7a_3015 { width: 30px; height: 30px; border-radius: 50%; border: 1px solid #d0d5dd; background: #ffffff; color: #344054; display: inline-flex; align-items: center; justify-content: center; cursor: pointer; transition: all 0.15s ease; } ._roundIconBtn_hqs7a_3015:hover { background: #f9fafb; color: #2563eb; border-color: #2563eb; } ._roundIconBtnDanger_hqs7a_3055:hover { background: #fef2f2; color: #dc2626; border-color: #dc2626; } ._selectionSummary_hqs7a_3067 { padding: 12px 16px; font-size: 13px; font-weight: 600; color: #2563eb; background: #f8fafc; border-top: 1px solid #eaecf0; margin-top: 12px; } ._methodRow_hqs7a_3087 { display: flex; align-items: stretch; gap: 16px; margin-bottom: 16px; flex-wrap: wrap; } ._methodCard_hqs7a_1827 { flex: 1; min-width: 260px; border: 1.5px solid #eaecf0; border-radius: 12px; padding: 8px; display: flex; gap: 2px; cursor: pointer; background: #ffffff; transition: all 0.15s ease; position: relative; } ._methodCardActive_hqs7a_3131 { border-color: #2563eb; background: #f0f7ff; box-shadow: 0 0 0 1px #2563eb; } ._methodRadioOuter_hqs7a_3143 { width: 18px; height: 18px; border-radius: 50%; border: 2px solid #98a2b3; margin-top: 2px; display: flex; align-items: center; justify-content: center; flex-shrink: 0; } ._methodCardActive_hqs7a_3131 ._methodRadioOuter_hqs7a_3143 { border-color: #2563eb; } ._methodRadioInner_hqs7a_3175 { width: 8px; height: 8px; border-radius: 50%; background: #2563eb; } ._methodIconBlue_hqs7a_3189 { color: #2563eb !important; } ._cutButton_hqs7a_3197 { background: #ff3b30; color: #ffffff; border: none; border-radius: 10px; padding: 9px 10px; font-size: 10px; font-weight: 700; white-space: nowrap; box-shadow: 0 2px 6px rgba(255, 59, 48, 0.25); display: inline-flex; align-items: center; justify-content: center; } ._cutButton_hqs7a_3197:hover { background: #e02d23; } ._methodNote_hqs7a_3235 { font-size: 12px; color: #667085; display: flex; align-items: center; gap: 6px; margin-top: 8px; } ._progressBar_hqs7a_3253 { height: 8px; background: #e2e8f0; border-radius: 6px; overflow: hidden; margin-top: 14px; } ._progressBarFill_hqs7a_3269 { height: 100%; background: #2563eb; transition: width 0.3s ease; } ._progressLabel_hqs7a_3281 { font-size: 13px; font-weight: 600; color: #2563eb; margin-top: 8px; } ._emptyState_hqs7a_3295 { padding: 36px 20px; text-align: center; color: #667085; font-size: 14px; background: #f8fafc; border-radius: 10px; border: 1px dashed #d0d5dd; } ._readyGrid_hqs7a_2035 { display: grid; grid-template-columns: repeat(auto-fill, minmax(220px, 1fr)); gap: 16px; } ._readyCard_hqs7a_2047 { background: #ffffff; border: 1px solid #eaecf0; border-radius: 12px; overflow: hidden; box-shadow: 0 1px 3px rgba(16, 24, 40, 0.04); display: flex; flex-direction: column; } ._readyThumbWrap_hqs7a_3347 { position: relative; width: 100%; /* 9:16 vertical shorts aspect ratio */ aspect-ratio: 9/16; max-height: 280px; background: #000000; overflow: hidden; } ._readyThumbWrap_hqs7a_3347 video { width: 100%; height: 100%; object-fit: cover; } ._readyBadge_hqs7a_2095 { position: absolute; top: 8px; right: 8px; background: rgba(240, 253, 244, 0.95); color: #16a34a; font-size: 11px; font-weight: 600; padding: 2px 8px; border-radius: 12px; display: flex; align-items: center; gap: 4px; } ._readyBody_hqs7a_3409 { padding: 12px 14px; flex: 1; display: flex; flex-direction: column; } ._readyTitle_hqs7a_3423 { font-size: 13px; font-weight: 600; color: #101828; margin: 0 0 8px 0; line-height: 1.35; } ._readyMetaRow_hqs7a_3439 { display: flex; align-items: center; gap: 8px; font-size: 12px; color: #667085; margin-top: auto; margin-bottom: 10px; } ._tagPill_hqs7a_3459 { display: inline-flex; padding: 2px 8px; border-radius: 12px; font-size: 11px; font-weight: 600; background: #f3effe; color: #7047eb; } ._tagPillBlue_hqs7a_3479 { background: #eff6ff; color: #2563eb; } ._readyActions_hqs7a_3489 { display: grid; grid-template-columns: 1fr 1fr; gap: 8px; border-top: 1px solid #f2f4f7; padding-top: 10px; } /* Voice & Speaker Face Focus features styling */ ._aspectRatioTag_hqs7a_3507 { background: #fef3f2; color: #ff3b30; font-weight: 700; font-size: 11px; padding: 2px 6px; border-radius: 4px; border: 1px solid #fee4e2; } ._voicePredictionBadge_hqs7a_3527 { display: inline-flex; align-items: center; gap: 6px; background: #eff6ff; border: 1px solid #bfdbfe; color: #1d4ed8; padding: 4px 10px; border-radius: 6px; font-size: 12px; font-weight: 600; } ._faceFocusIndicator_hqs7a_3553 { display: inline-flex; align-items: center; gap: 6px; background: #ecfdf5; border: 1px solid #a7f3d0; color: #047857; padding: 4px 10px; border-radius: 6px; font-size: 12px; font-weight: 600; } ._liveDetectionPills_hqs7a_3579 { display: flex; gap: 10px; flex-wrap: wrap; margin-top: 12px; padding: 10px 14px; background: #f8fafc; border: 1px solid #eaecf0; border-radius: 8px; } ._pulseDot_hqs7a_3601 { width: 8px; height: 8px; border-radius: 50%; background: #10b981; box-shadow: 0 0 0 rgba(16, 185, 129, 0.4); animation: _pulseAnimation_hqs7a_1 1.5s infinite; } @keyframes _pulseAnimation_hqs7a_1 { 0% { box-shadow: 0 0 0 0 rgba(16, 185, 129, 0.6); } 70% { box-shadow: 0 0 0 6px rgba(16, 185, 129, 0); } 100% { box-shadow: 0 0 0 0 rgba(16, 185, 129, 0); } } ._splitScreenBadge_hqs7a_3647 { display: inline-flex; align-items: center; gap: 6px; background: #fdf2f8; border: 1px solid #fbcfe8; color: #db2777; padding: 4px 10px; border-radius: 6px; font-size: 12px; font-weight: 600; } ._payloadConsolePill_hqs7a_3673 { display: inline-flex; align-items: center; gap: 6px; background: #f8fafc; border: 1px dashed #94a3b8; color: #475569; padding: 6px 12px; border-radius: 6px; font-size: 12px; font-family: monospace; } /* ---------- Stats row ---------- */ ._statsGrid_hqs7a_3699 { display: grid; grid-template-columns: repeat(4, 1fr) 1.5fr; gap: 16px; margin-bottom: 24px; } ._statCard_hqs7a_3713 { background: #ffffff; border: 1px solid #eaecf0; border-radius: 12px; padding: 3px 10px; display: flex; align-items: center; gap: 10px; box-shadow: 0 1px 2px rgba(16, 24, 40, 0.03); } ._statIcon_hqs7a_3735 { width: 32px; height: 32px; border-radius: 10px; display: flex; align-items: center; justify-content: center; flex-shrink: 0; font-size: 18px; } ._statLabel_hqs7a_3757 { font-size: 12px; font-weight: 500; color: #667085; margin-bottom: 2px; } ._statValue_hqs7a_3771 { font-size: 16px; font-weight: 700; color: #101828; line-height: 1.1; } /* storageCard already exists above — these are the sub-parts the new markup needs */ ._storageTopRow_hqs7a_3787 { display: flex; justify-content: space-between; align-items: center; font-size: 13px; color: #344054; margin-bottom: 8px; } ._storageTrack_hqs7a_3805 { height: 6px; background: #f2f4f7; border-radius: 6px; overflow: hidden; margin-bottom: 8px; } ._storageFill_hqs7a_3821 { height: 100%; background: #ff3b30; border-radius: 6px; } ._storageLink_hqs7a_3833 { font-size: 12px; font-weight: 600; color: #2563eb; background: transparent; border: none; padding: 0; text-align: left; cursor: pointer; } /* ---------- Filters bar ---------- */ ._filtersBar_hqs7a_3857 { display: flex; align-items: center; gap: 10px; margin-bottom: 16px; flex-wrap: wrap; } ._filterSearch_hqs7a_3873 { position: relative; display: flex; align-items: center; gap: 8px; flex: 1; min-width: 240px; max-width: 320px; padding: 8px 12px; background: #ffffff; border: 1px solid #d0d5dd; border-radius: 8px; color: #98a2b3; } ._filterSearch_hqs7a_3873 input { border: none; outline: none; background: transparent; font-size: 13px; color: #101828; width: 100%; } ._selectInput_hqs7a_3921 { padding: 8px 12px; background: #ffffff; border: 1px solid #d0d5dd; border-radius: 8px; font-size: 13px; color: #344054; cursor: pointer; outline: none; } ._iconFilterBtn_hqs7a_3943 { background: #ffffff; border: 1px solid #d0d5dd; border-radius: 8px; padding: 8px; display: inline-flex; align-items: center; justify-content: center; color: #667085; cursor: pointer; } ._iconFilterBtn_hqs7a_3943:hover { background: #f9fafb; color: #101828; } ._viewToggle_hqs7a_3977 { display: inline-flex; border: 1px solid #d0d5dd; border-radius: 8px; overflow: hidden; margin-left: auto; } ._viewToggleBtn_hqs7a_3993 { background: #ffffff; border: none; padding: 8px 10px; color: #667085; cursor: pointer; display: inline-flex; align-items: center; justify-content: center; } ._viewToggleBtn_hqs7a_3993 + ._viewToggleBtn_hqs7a_3993 { border-left: 1px solid #d0d5dd; } ._viewToggleBtn_hqs7a_3993:hover { background: #f9fafb; color: #101828; } ._viewToggleActive_hqs7a_4033 { background: #fff1f0; color: #ff3b30; } /* ---------- Table shell (list view) ---------- */ ._tableWrap_hqs7a_4045 { background: #ffffff; border: 1px solid #eaecf0; border-radius: 12px; overflow: hidden; box-shadow: 0 1px 2px rgba(16, 24, 40, 0.03); } ._historyTable_hqs7a_4061 { width: 100%; border-collapse: collapse; text-align: left; font-size: 13px; } ._historyTable_hqs7a_4061 th { background: #f9fafb; padding: 12px 16px; font-weight: 600; color: #475467; border-bottom: 1px solid #eaecf0; white-space: nowrap; } ._historyTable_hqs7a_4061 td { padding: 14px 16px; border-bottom: 1px solid #eaecf0; color: #344054; vertical-align: middle; } ._historyTable_hqs7a_4061 tr:last-child td { border-bottom: none; } ._historyTable_hqs7a_4061 tr:hover td { background-color: #fafbfc; } ._thumbSmall_hqs7a_4123 { width: 56px; height: 40px; border-radius: 6px; overflow: hidden; background: #1e293b; flex-shrink: 0; } ._thumbSmall_hqs7a_4123 img { width: 100%; height: 100%; object-fit: cover; } ._videoCellName_hqs7a_4153 { font-weight: 600; color: #101828; font-size: 13px; } ._videoCellSub_hqs7a_4165 { font-size: 11px; color: #667085; } ._mutedText_hqs7a_4175 { color: #98a2b3; } /* method tag (AI Cut / Normal Cut) */ ._methodTag_hqs7a_4185 { display: inline-flex; align-items: center; padding: 3px 8px; border-radius: 6px; font-size: 12px; font-weight: 500; background: #f3effe; color: #7047eb; white-space: nowrap; } ._methodTagBlue_hqs7a_4209 { background: #eff6ff; color: #2563eb; } /* status badge dot + mini progress bar under it */ ._dot_hqs7a_1215 { width: 6px; height: 6px; border-radius: 50%; background: currentColor; display: inline-block; } ._miniProgressTrack_hqs7a_4237 { height: 4px; width: 90px; background: #e2e8f0; border-radius: 4px; overflow: hidden; margin-top: 6px; } ._miniProgressFill_hqs7a_4255 { height: 100%; background: #2563eb; border-radius: 4px; transition: width 0.3s ease; } /* actions cell */ ._actionsCell_hqs7a_4271 { display: flex; align-items: center; gap: 8px; position: relative; } ._smallBtn_hqs7a_4285 { display: inline-flex; align-items: center; gap: 6px; background: #ffffff; border: 1px solid #d0d5dd; border-radius: 6px; padding: 5px 10px; font-size: 12px; font-weight: 500; color: #344054; cursor: pointer; white-space: nowrap; } ._smallBtn_hqs7a_4285:hover { background: #f9fafb; } ._retryBtn_hqs7a_4323 { border-color: #fecaca; color: #dc2626; } ._retryBtn_hqs7a_4323:hover { background: #fef2f2; } ._iconBtnGhost_hqs7a_4341 { background: transparent; border: none; color: #667085; cursor: pointer; padding: 5px; border-radius: 6px; display: flex; align-items: center; } ._iconBtnGhost_hqs7a_4341:hover { color: #101828; background: #f2f4f7; } ._iconBtnGhost_hqs7a_4341:disabled { opacity: 0.4; cursor: not-allowed; } ._iconBtnGhost_hqs7a_4341:disabled:hover { background: transparent; color: #667085; } /* dropdown menu on "more" */ ._moreMenu_hqs7a_4395 { position: absolute; top: calc(100% + 6px); right: 0; background: #ffffff; border: 1px solid #eaecf0; border-radius: 8px; box-shadow: 0 10px 15px -3px rgba(16, 24, 40, 0.1), 0 4px 6px -2px rgba(16, 24, 40, 0.05); min-width: 160px; z-index: 30; overflow: hidden; padding: 4px; } ._moreMenuItem_hqs7a_4427 { display: flex; align-items: center; gap: 8px; width: 100%; background: transparent; border: none; padding: 8px 10px; font-size: 13px; color: #344054; cursor: pointer; border-radius: 6px; text-align: left; } ._moreMenuItem_hqs7a_4427:hover { background: #f9fafb; } ._moreMenuItemDanger_hqs7a_4465 { color: #dc2626; } ._moreMenuItemDanger_hqs7a_4465:hover { background: #fef2f2; } /* ---------- Grid view ---------- */ ._historyGrid_hqs7a_4483 { display: grid; grid-template-columns: repeat(auto-fill, minmax(220px, 1fr)); gap: 16px; padding: 16px; } ._historyGridCard_hqs7a_4497 { background: #ffffff; border: 1px solid #eaecf0; border-radius: 12px; overflow: hidden; box-shadow: 0 1px 3px rgba(16, 24, 40, 0.04); display: flex; flex-direction: column; } ._historyGridThumb_hqs7a_4517 { width: 100%; aspect-ratio: 16/10; background: #0f172a; } ._historyGridBody_hqs7a_4529 { padding: 14px; flex: 1; display: flex; flex-direction: column; } /* ---------- Footer / pagination ---------- */ ._tableFooter_hqs7a_4545 { display: flex; justify-content: space-between; align-items: center; padding: 14px 20px; border-top: 1px solid #eaecf0; background: #ffffff; font-size: 13px; color: #475467; flex-wrap: wrap; gap: 10px; } ._footerInfo_hqs7a_4571 { font-size: 13px; color: #475467; } ._pagination_hqs7a_1367 { display: flex; align-items: center; gap: 4px; flex-wrap: wrap; } ._pageSizeSelect_hqs7a_4595 { margin-left: 8px; padding: 6px 10px; border: 1px solid #d0d5dd; border-radius: 6px; font-size: 12px; color: #344054; background: #ffffff; cursor: pointer; outline: none; } /* ================================================================ VIDEO STAT ICON COLORS Add at the bottom of Videocutlist.module.css ================================================================ */ /* READY SHORTS */ ._green_hqs7a_4629 { background: #e8f8ef; color: #16a34a; } /* PROCESSING */ ._purple_hqs7a_4641 { background: #f1edff; color: #7047eb; } /* FAILED */ ._danger_hqs7a_4653 { background: #fff0f0; color: #ef4444; } /* ============================================================ VIDEO DETAIL MODAL ============================================================ */ ._modalOverlay_1pbnf_9 { position: fixed; inset: 0; z-index: var(--z-modal, 1000); display: flex; align-items: center; justify-content: center; padding: 16px; background: rgba(15, 23, 42, 0.55); backdrop-filter: blur(2px); } /* ============================================================ MODAL ============================================================ */ ._modal_1pbnf_9 { width: min(820px, calc(100vw - 40px)); max-height: min(720px, calc(100vh - 40px)); display: flex; flex-direction: column; background: #ffffff; border-radius: 12px; box-shadow: 0 16px 44px rgba(15, 23, 42, 0.2); overflow: hidden; animation: _modalIn_1pbnf_1 150ms ease; } @keyframes _modalIn_1pbnf_1 { from { opacity: 0; transform: translateY(6px) scale(0.985); } to { opacity: 1; transform: translateY(0) scale(1); } } /* ============================================================ HEADER ============================================================ */ ._modalHeader_1pbnf_121 { display: flex; align-items: flex-start; justify-content: space-between; gap: 14px; padding: 14px 18px; border-bottom: 1px solid #e8ecf2; flex-shrink: 0; } ._modalHeaderContent_1pbnf_149 { min-width: 0; } ._modalTitle_1pbnf_157 { margin: 0; font-size: 15px; font-weight: 700; line-height: 1.35; color: #172033; display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; } ._modalDescription_1pbnf_193 { margin: 3px 0 0; font-size: 11px; color: #6b7280; } /* ============================================================ CLOSE BUTTON ============================================================ */ ._closeButton_1pbnf_217 { appearance: none; -webkit-appearance: none; width: 28px; height: 28px; padding: 0; flex-shrink: 0; display: flex; align-items: center; justify-content: center; border: 0; outline: 0; border-radius: 7px; background: #f5f7fa; color: #667085; cursor: pointer; transition: background 0.15s ease, color 0.15s ease; } ._closeButton_1pbnf_217:hover { background: #eef1f5; color: #172033; } /* ============================================================ BODY ============================================================ */ ._modalBody_1pbnf_299 { padding: 16px 18px; overflow-y: auto; flex: 1; min-height: 0; } /* ============================================================ LOADING / ERROR ============================================================ */ ._stateBox_1pbnf_327, ._stateBoxError_1pbnf_329 { display: flex; align-items: center; justify-content: center; gap: 8px; min-height: 140px; font-size: 12px; } ._stateBox_1pbnf_327 { color: #6b7280; } ._stateBoxError_1pbnf_329 { padding: 14px; min-height: 110px; border: 1px solid #fecaca; border-radius: 8px; background: #fef2f2; color: #b91c1c; } ._spin_1pbnf_389 { animation: _spin_1pbnf_389 1s linear infinite; } @keyframes _spin_1pbnf_389 { from { transform: rotate(0deg); } to { transform: rotate(360deg); } } /* ============================================================ SUMMARY ============================================================ */ ._summaryRow_1pbnf_425 { display: flex; align-items: center; flex-wrap: wrap; gap: 6px; padding-bottom: 12px; border-bottom: 1px solid #eef1f5; } ._chip_1pbnf_449 { display: inline-flex; align-items: center; gap: 5px; padding: 3px 8px; border-radius: 6px; background: #f5f7fa; color: #475569; font-size: 11px; white-space: nowrap; } ._chip_1pbnf_449 svg { color: #94a3b8; flex-shrink: 0; } ._methodTag_1pbnf_499 { display: inline-flex; align-items: center; padding: 3px 9px; border-radius: 999px; background: #fee2e2; color: #b91c1c; font-size: 11px; font-weight: 600; } /* ============================================================ SOURCE BUTTON ============================================================ */ ._sourceLink_1pbnf_541 { appearance: none; -webkit-appearance: none; display: inline-flex; align-items: center; justify-content: center; gap: 5px; margin-left: auto; padding: 4px 9px; border: 1px solid #d9dee7; border-radius: 6px; outline: none; background: #ffffff; box-shadow: none; color: #344054; font-family: inherit; font-size: 11px; font-weight: 600; line-height: 1.4; white-space: nowrap; cursor: pointer; } ._sourceLink_1pbnf_541:hover { background: #f5f7fa; border-color: #b8c3d1; } /* ============================================================ STATUS BADGE ============================================================ */ ._statusBadge_1pbnf_639 { display: inline-flex; align-items: center; gap: 4px; padding: 3px 9px; border-radius: 999px; font-size: 11px; font-weight: 600; white-space: nowrap; } ._statusBadgeSmall_1pbnf_673 { padding: 3px 7px; font-size: 10px; font-weight: 500; line-height: 1.3; } ._statusBadgeSmall_1pbnf_673 svg { width: 11px; height: 11px; } ._statusReady_1pbnf_703 { background: #dcfce7; color: #15803d; } ._statusProcessing_1pbnf_715 { background: #dbeafe; color: #1d4ed8; } ._statusProcessing_1pbnf_715 svg { animation: _spin_1pbnf_389 1s linear infinite; } ._statusFailed_1pbnf_735 { background: #fee2e2; color: #b91c1c; } ._statusQueued_1pbnf_747 { background: #f1f5f9; color: #475569; } /* ============================================================ ERROR MESSAGE ============================================================ */ ._errorMessageBox_1pbnf_767 { display: flex; align-items: flex-start; gap: 6px; margin-top: 10px; padding: 8px 10px; border: 1px solid #fecaca; border-radius: 7px; background: #fef2f2; color: #b91c1c; font-size: 11px; line-height: 1.45; word-break: break-word; } ._errorMessageBoxSmall_1pbnf_817 { margin-top: 4px; padding: 5px 7px; border-radius: 5px; background: #fef2f2; color: #b91c1c; font-size: 10px; line-height: 1.4; display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; } /* ============================================================ PROGRESS ============================================================ */ ._progressBox_1pbnf_871 { display: flex; align-items: center; gap: 8px; margin-top: 10px; } ._progressTrack_1pbnf_889 { flex: 1; height: 5px; border-radius: 999px; background: #e2e8f0; overflow: hidden; } ._progressFill_1pbnf_913 { height: 100%; background: #2563eb; border-radius: 999px; transition: width 0.3s ease; } ._progressLabel_1pbnf_933 { font-size: 10px; color: #64748b; white-space: nowrap; } /* ============================================================ PROMPT ============================================================ */ ._promptBox_1pbnf_957 { margin-top: 10px; padding: 8px 10px; border: 1px solid #e4e8f0; border-radius: 7px; background: #f8fafc; } ._promptLabel_1pbnf_981 { display: block; margin-bottom: 3px; color: #94a3b8; font-size: 9px; font-weight: 700; letter-spacing: 0.03em; text-transform: uppercase; } ._promptText_1pbnf_1013 { margin: 0; color: #334155; font-size: 11px; line-height: 1.5; } /* ============================================================ CLIPS SECTION ============================================================ */ ._clipsSection_1pbnf_1041 { margin-top: 16px; } ._clipsTitle_1pbnf_1049 { margin: 0 0 12px; display: flex; align-items: center; gap: 8px; color: #172033; font-size: 14px; font-weight: 700; line-height: 1.3; } ._clipsCount_1pbnf_1083 { padding: 1px 7px; border-radius: 999px; background: #f1f5f9; color: #475569; font-size: 10px; font-weight: 600; } ._noClips_1pbnf_1111 { padding: 18px; text-align: center; border: 1px dashed #d9dee7; border-radius: 8px; color: #8a94a6; font-size: 11px; } /* ============================================================ CLIPS GRID ============================================================ */ ._clipsGrid_1pbnf_1147 { display: grid; grid-template-columns: repeat(2, minmax(0, 260px)); align-items: start; justify-content: flex-start; gap: 16px; } /* ============================================================ CLIP CARD ============================================================ */ ._clipCard_1pbnf_1179 { display: flex; flex-direction: column; width: 100%; min-width: 0; border: 1px solid #e4e8ef; border-radius: 10px; overflow: hidden; background: #ffffff; box-shadow: none; } /* ============================================================ VIDEO PLAYER ============================================================ */ ._clipPlayerWrap_1pbnf_1227 { position: relative; width: 100%; height: 165px; min-height: 165px; max-height: 165px; aspect-ratio: auto; background: #000000; overflow: hidden; } ._clipThumbnail_1pbnf_1261 { display: block; width: 100%; height: 165px; object-fit: cover; background: #f8fafc; } @media (max-width: 768px) { ._clipThumbnail_1pbnf_1261 { height: 155px; } } @media (max-width: 768px) { ._clipThumbnail_1pbnf_1261 { height: 155px; } } ._clipPlayer_1pbnf_1227 { display: block; width: 100%; height: 165px; min-height: 165px; max-height: 165px; object-fit: contain; background: #000000; } ._playerFallback_1pbnf_1329 { width: 100%; height: 165px; display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 5px; background: #0f172a; color: #94a3b8; font-size: 10px; } /* ============================================================ VIRAL SCORE ============================================================ */ ._viralBadge_1pbnf_1381 { position: absolute; top: 7px; right: 7px; padding: 2px 7px; border-radius: 999px; background: rgba(15, 23, 42, 0.78); color: #ffffff; font-size: 10px; font-weight: 700; line-height: 1.3; pointer-events: none; } /* ============================================================ CLIP BODY ============================================================ */ ._clipBody_1pbnf_1437 { display: flex; flex-direction: column; gap: 8px; padding: 10px 12px 12px; background: #ffffff; } /* ============================================================ CLIP TITLE ============================================================ */ ._clipTitle_1pbnf_1469 { margin: 0; color: #172033; font-size: 12px; font-weight: 600; line-height: 1.4; min-height: 34px; max-height: 34px; display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; } /* ============================================================ STATUS + TIME ============================================================ */ ._clipMetaRow_1pbnf_1525 { display: flex; align-items: center; justify-content: space-between; gap: 8px; width: 100%; } ._clipTime_1pbnf_1549 { color: #94a3b8; font-size: 10px; font-weight: 400; line-height: 1.3; white-space: nowrap; } /* ============================================================ DOWNLOAD BUTTON ============================================================ */ ._clipDownloadBtn_1pbnf_1581 { appearance: none; -webkit-appearance: none; display: inline-flex; align-items: center; justify-content: flex-start; align-self: flex-start; gap: 5px; width: auto; min-width: 0; height: auto; min-height: 0; margin: 2px 0 0; padding: 0; border: 0; outline: 0; border-radius: 0; background: transparent; box-shadow: none; color: #7657ff; font-family: inherit; font-size: 12px; font-weight: 500; line-height: 1.3; text-decoration: none; cursor: pointer; transition: color 0.15s ease, opacity 0.15s ease; } ._clipDownloadBtn_1pbnf_1581 svg { width: 14px; height: 14px; flex-shrink: 0; stroke-width: 2; } ._clipDownloadBtn_1pbnf_1581 span { font-size: inherit; font-weight: inherit; line-height: inherit; } ._clipDownloadBtn_1pbnf_1581:hover { color: #6246ea; background: transparent; border: 0; box-shadow: none; } ._clipDownloadBtn_1pbnf_1581:focus, ._clipDownloadBtn_1pbnf_1581:focus-visible { outline: 0; box-shadow: none; } ._clipDownloadBtn_1pbnf_1581:active { color: #563bd8; transform: none; } ._clipDownloadBtn_1pbnf_1581:disabled { opacity: 0.55; cursor: not-allowed; } /* ============================================================ FOOTER ============================================================ */ ._modalFooter_1pbnf_1795 { display: flex; align-items: center; justify-content: flex-end; padding: 10px 18px; border-top: 1px solid #e8ecf2; background: #ffffff; flex-shrink: 0; } /* ============================================================ RESPONSIVE - TABLET ============================================================ */ @media (max-width: 768px) { ._modal_1pbnf_9 { width: calc(100vw - 20px); max-height: calc(100vh - 20px); } ._modalHeader_1pbnf_121, ._modalBody_1pbnf_299, ._modalFooter_1pbnf_1795 { padding-left: 12px; padding-right: 12px; } ._clipsGrid_1pbnf_1147 { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 10px; } ._clipPlayerWrap_1pbnf_1227, ._clipPlayer_1pbnf_1227, ._playerFallback_1pbnf_1329 { height: 155px; min-height: 155px; max-height: 155px; } ._sourceLink_1pbnf_541 { margin-left: 0; } } /* ============================================================ RESPONSIVE - MOBILE ============================================================ */ @media (max-width: 520px) { ._clipsGrid_1pbnf_1147 { grid-template-columns: 1fr; } ._clipPlayerWrap_1pbnf_1227, ._clipPlayer_1pbnf_1227, ._playerFallback_1pbnf_1329 { height: 190px; min-height: 190px; max-height: 190px; } ._clipTitle_1pbnf_1469 { font-size: 12px; } ._clipTime_1pbnf_1549 { font-size: 10px; } ._clipDownloadBtn_1pbnf_1581 { font-size: 12px; } } ._page_1t9j8_1 { position: relative; width: 100%; min-width: 0; display: flex; flex-direction: column; gap: var(--space-4); padding-top: var(--space-4); box-sizing: border-box; } /* ================================================================ HEADER ================================================================ */ ._header_1t9j8_39 { display: flex; align-items: flex-start; justify-content: space-between; gap: var(--space-5); min-width: 0; margin-bottom: var(--space-1); } ._brand_1t9j8_63 { display: flex; align-items: center; gap: var(--space-3); min-width: 0; } ._brandIcon_1t9j8_81 { width: 48px; height: 48px; flex: 0 0 48px; display: inline-flex; align-items: center; justify-content: center; border: 1px solid var(--brand, #0866ff); border-radius: 50%; background: var(--brand-soft, #eef4ff); color: var(--brand, #0866ff); font-size: var(--font-size-xl); } ._brand_1t9j8_63 h1 { margin: 0; color: var(--ink, #101b3d); font-size: var(--font-size-2xl); font-weight: 700; line-height: 1.2; letter-spacing: -0.35px; } ._brand_1t9j8_63 p { margin: var(--space-2) 0 0; color: var(--ink-soft, #68738d); font-size: var(--font-size-sm); } /* ================================================================ WORKSPACE ================================================================ */ ._workspace_1t9j8_163 { width: 100%; min-width: 0; display: grid; grid-template-columns: minmax(0, 1fr) 300px; gap: var(--space-4); align-items: start; } ._main_1t9j8_189 { min-width: 0; display: flex; flex-direction: column; gap: var(--space-4); } /* ================================================================ SEARCH ================================================================ */ ._searchSection_1t9j8_215 { display: flex; flex-direction: column; gap: var(--space-3); } ._searchBox_1t9j8_229 { width: 100%; display: flex; align-items: center; gap: var(--space-2); min-height: 50px; padding: var(--space-2); border: 1px solid var(--line-strong, #d9e0ea); border-radius: 10px; background: var(--surface, #ffffff); box-shadow: var(--sh-sm, 0 1px 2px rgba(15, 23, 42, 0.05)); box-sizing: border-box; transition: border-color var(--t-fast, 140ms ease), box-shadow var(--t-fast, 140ms ease), background var(--t-fast, 140ms ease); } ._searchBox_1t9j8_229:focus-within { border-color: var(--line-strong, #d9e0ea); background: var(--surface, #ffffff); box-shadow: none !important; outline: none !important; } ._searchIcon_1t9j8_297 { flex-shrink: 0; margin-left: var(--space-2); color: var(--ink-soft, #68738d); font-size: var(--font-size-base); } ._searchBox_1t9j8_229 input { flex: 1; min-width: 0; height: 36px; padding: 0; border: none; outline: none; background: transparent; color: var(--ink, #101b3d); font: inherit; font-size: var(--font-size-sm); } ._searchBox_1t9j8_229 input, ._searchBox_1t9j8_229 input:focus, ._searchBox_1t9j8_229 input:focus-visible, ._searchBox_1t9j8_229 input:active { border: none !important; outline: none !important; box-shadow: none !important; background: transparent !important; } ._searchBox_1t9j8_229 input::placeholder { color: var(--ink-muted, #9099ad); } ._micButton_1t9j8_383 { width: 36px; height: 36px; display: inline-flex; align-items: center; justify-content: center; flex-shrink: 0; padding: 0; border: 1px solid transparent; border-radius: 7px; background: transparent; color: var(--ink-soft, #68738d); cursor: pointer; font-size: var(--font-size-base); transition: border-color var(--t-fast, 140ms ease), background var(--t-fast, 140ms ease), color var(--t-fast, 140ms ease); } ._micButton_1t9j8_383:hover { border-color: var(--line, #e3e8f0); background: var(--brand-soft, #eef4ff); color: var(--brand, #0866ff); } ._searchButton_1t9j8_457 { min-height: 38px; display: inline-flex; align-items: center; justify-content: center; gap: var(--space-2); flex-shrink: 0; padding: 0 var(--space-4); border: 1px solid var(--brand, #0866ff); border-radius: 7px; background: var(--brand, #0866ff); color: #ffffff; font: inherit; font-size: var(--font-size-xs); font-weight: 600; cursor: pointer; transition: background var(--t-fast, 140ms ease), border-color var(--t-fast, 140ms ease), color var(--t-fast, 140ms ease); } ._searchButton_1t9j8_457:hover { border-color: var(--brand-hover, #0055e8); background: var(--brand-hover, #0055e8); color: #ffffff; } /* ================================================================ QUICK SEARCHES ================================================================ */ ._quickSearches_1t9j8_545 { display: flex; align-items: center; flex-wrap: wrap; gap: var(--space-2); } ._quickChip_1t9j8_561 { min-height: 32px; display: inline-flex; align-items: center; justify-content: center; gap: var(--space-2); padding: 0 var(--space-3); border: 1px solid var(--line, #e3e8f0); border-radius: 999px; background: var(--surface, #ffffff); color: var(--ink, #101b3d); font: inherit; font-size: var(--font-size-xs); font-weight: 500; cursor: pointer; transition: border-color var(--t-fast, 140ms ease), background var(--t-fast, 140ms ease), color var(--t-fast, 140ms ease); } ._quickChip_1t9j8_561:hover { border-color: var(--brand, #0866ff); background: var(--brand-soft, #eef4ff); color: var(--brand, #0866ff); } /* ================================================================ COMMON CARD ================================================================ */ ._card_1t9j8_645 { width: 100%; border: 1px solid var(--line, #e3e8f0); border-radius: 12px; background: var(--surface, #ffffff); box-shadow: var(--sh-sm, 0 1px 2px rgba(15, 23, 42, 0.05)); box-sizing: border-box; } /* ================================================================ AI SUMMARY ================================================================ */ ._summaryCard_1t9j8_679 { display: grid; grid-template-columns: auto minmax(0, 1fr) auto; align-items: center; gap: var(--space-4); padding: var(--space-4); } /* Robot mascot avatar */ ._aiAvatar_1t9j8_705 { position: relative; width: 84px; height: 84px; flex-shrink: 0; display: flex; align-items: center; justify-content: center; border-radius: var(--radius-full); background: var(--brand-soft); } ._aiAvatarRobot_1t9j8_739 { width: 62px; height: 62px; } ._aiAvatarSparkle_1t9j8_749 { position: absolute; top: 6px; right: 8px; color: var(--brand, #0866ff); font-size: 14px; } ._summaryContent_1t9j8_771 { min-width: 0; } ._summaryContent_1t9j8_771 h2 { margin: 0 0 var(--space-1); color: var(--ink, #101b3d); font-size: var(--font-size-lg); font-weight: 700; } ._summaryContent_1t9j8_771 p { max-width: 620px; margin: 0; color: var(--ink-soft, #68738d); font-size: var(--font-size-sm); line-height: var(--line-height-relaxed); } ._summaryActions_1t9j8_819 { display: flex; align-items: center; flex-wrap: wrap; gap: var(--space-2); } ._secondaryButton_1t9j8_835 { min-height: 35px; display: inline-flex; align-items: center; justify-content: center; gap: var(--space-2); padding: 0 var(--space-3); border: 1px solid var(--line-strong, #d9e0ea); border-radius: 7px; background: var(--surface, #ffffff); color: var(--ink, #101b3d); font: inherit; font-size: var(--font-size-xs); font-weight: 500; cursor: pointer; transition: border-color var(--t-fast, 140ms ease), background var(--t-fast, 140ms ease), color var(--t-fast, 140ms ease); } ._secondaryButton_1t9j8_835:hover { border-color: var(--brand, #0866ff); background: var(--brand-soft, #eef4ff); color: var(--brand, #0866ff); } /* ================================================================ RESULTS TOP ================================================================ */ ._resultsSection_1t9j8_919 { min-width: 0; } ._resultsTop_1t9j8_927 { display: flex; align-items: center; justify-content: space-between; gap: var(--space-3); margin-bottom: var(--space-2); } ._resultsTitle_1t9j8_947 { display: flex; align-items: baseline; gap: var(--space-2); } ._resultsTitle_1t9j8_947 h2 { margin: 0; color: var(--ink, #101b3d); font-size: var(--font-size-lg); font-weight: 700; } ._resultsTitle_1t9j8_947 span { color: var(--ink-soft, #68738d); font-size: var(--font-size-xs); } ._filters_1t9j8_991 { display: flex; align-items: center; gap: var(--space-2); } ._filterSelect_1t9j8_1005 { min-height: 35px; display: inline-flex; align-items: center; gap: var(--space-2); padding: 0 var(--space-3); border: 1px solid var(--line-strong, #d9e0ea); border-radius: 7px; background: var(--surface, #ffffff); color: var(--ink-soft, #68738d); transition: border-color var(--t-fast, 140ms ease), background var(--t-fast, 140ms ease), color var(--t-fast, 140ms ease); } ._filterSelect_1t9j8_1005:hover { border-color: var(--brand, #0866ff); background: var(--brand-soft, #eef4ff); color: var(--brand, #0866ff); } ._filterSelect_1t9j8_1005 select { appearance: none; border: none; outline: none; background: transparent; color: var(--ink, #101b3d); font: inherit; font-size: var(--font-size-xs); font-weight: 500; cursor: pointer; } ._filterSelect_1t9j8_1005 > svg:last-child { font-size: var(--font-size-xs); } /* ================================================================ RESULT LIST ================================================================ */ ._resultsList_1t9j8_1117 { overflow: hidden; border: 1px solid var(--line, #e3e8f0); border-radius: 12px; background: var(--surface, #ffffff); box-shadow: var(--sh-sm, 0 1px 2px rgba(15, 23, 42, 0.05)); } ._resultItem_1t9j8_1139 { display: grid; grid-template-columns: auto minmax(0, 1fr) auto auto; align-items: center; gap: var(--space-3); padding: var(--space-3) var(--space-4); border-bottom: 1px solid var(--line, #e3e8f0); transition: background var(--t-fast, 140ms ease), border-color var(--t-fast, 140ms ease); } ._resultItem_1t9j8_1139:last-child { border-bottom: none; } ._resultItem_1t9j8_1139:hover { background: var(--brand-soft, #eef4ff); } ._bestResult_1t9j8_1191 { background: color-mix( in srgb, var(--brand-soft, #eef4ff) 65%, var(--surface, #ffffff) ); } ._fileIcon_1t9j8_1207 { width: 42px; height: 46px; display: flex; align-items: center; justify-content: center; flex-shrink: 0; border-radius: var(--radius-md); font-size: var(--font-size-lg); } ._file_pdf_1t9j8_1237 { background: color-mix(in srgb, var(--color-danger) 15%, white); color: var(--color-danger); } ._file_sheet_1t9j8_1249 { background: color-mix(in srgb, var(--color-success) 15%, white); color: var(--color-success); } ._file_doc_1t9j8_1261 { background: color-mix(in srgb, var(--color-info) 15%, white); color: var(--brand, #0866ff); } ._file_presentation_1t9j8_1273 { background: color-mix(in srgb, var(--color-warning) 15%, white); color: var(--color-warning); } ._fileContent_1t9j8_1285 { min-width: 0; } ._fileTitleRow_1t9j8_1293 { display: flex; align-items: center; flex-wrap: wrap; gap: var(--space-2); } ._fileTitleRow_1t9j8_1293 h3 { margin: 0; color: var(--ink, #101b3d); font-size: var(--font-size-sm); font-weight: 600; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; } ._bestMatchBadge_1t9j8_1335 { display: inline-flex; align-items: center; gap: var(--space-1); padding: 3px 8px; border-radius: var(--radius-full); background: var(--brand-soft); color: var(--brand, #0866ff); font-size: var(--font-size-xs); } ._fileContent_1t9j8_1285 > p { margin: 3px 0; color: var(--ink-soft, #68738d); font-size: var(--font-size-xs); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; } ._fileMeta_1t9j8_1393 { display: flex; align-items: center; flex-wrap: wrap; gap: var(--space-3); } ._fileMeta_1t9j8_1393 span { display: inline-flex; align-items: center; gap: var(--space-1); color: var(--ink-soft, #68738d); font-size: var(--font-size-xs); } ._relevance_1t9j8_1431 { display: flex; flex-direction: column; align-items: flex-end; min-width: 64px; } ._relevance_1t9j8_1431 strong { color: var(--color-success); font-size: var(--font-size-lg); font-weight: 700; } ._relevance_1t9j8_1431 span { color: var(--ink-soft, #68738d); font-size: var(--font-size-xs); } ._moreButton_1t9j8_1473 { width: 34px; height: 34px; display: inline-flex; align-items: center; justify-content: center; padding: 0; border: 1px solid transparent; border-radius: 7px; background: transparent; color: var(--ink-soft, #68738d); cursor: pointer; transition: border-color var(--t-fast, 140ms ease), background var(--t-fast, 140ms ease), color var(--t-fast, 140ms ease); } ._moreButton_1t9j8_1473:hover { border-color: var(--line, #e3e8f0); background: var(--brand-soft, #eef4ff); color: var(--brand, #0866ff); } /* ================================================================ RECENT SEARCHES ================================================================ */ ._recentPanel_1t9j8_1547 { overflow: hidden; } ._recentHeader_1t9j8_1555 { display: flex; align-items: center; justify-content: space-between; gap: var(--space-2); min-height: 54px; padding: var(--space-3) var(--space-4); border-bottom: 1px solid var(--line, #e3e8f0); } ._recentHeader_1t9j8_1555 > div { display: flex; align-items: center; gap: var(--space-2); } ._recentHeader_1t9j8_1555 svg { color: var(--brand, #0866ff); } ._recentHeader_1t9j8_1555 h2 { margin: 0; color: var(--ink, #101b3d); font-size: var(--font-size-base); font-weight: 700; } ._recentHeader_1t9j8_1555 > button { min-height: 32px; padding: 0 var(--space-2); border: 1px solid transparent; border-radius: 7px; background: transparent; color: var(--brand, #0866ff); font: inherit; font-size: var(--font-size-xs); font-weight: 500; cursor: pointer; transition: border-color var(--t-fast, 140ms ease), background var(--t-fast, 140ms ease); } ._recentHeader_1t9j8_1555 > button:hover { border-color: var(--line, #e3e8f0); background: var(--brand-soft, #eef4ff); text-decoration: none; } ._recentList_1t9j8_1685 { display: flex; flex-direction: column; } ._recentItem_1t9j8_1695 { display: grid; grid-template-columns: auto minmax(0, 1fr) auto; align-items: center; gap: var(--space-2); padding: var(--space-3) var(--space-4); border-bottom: 1px solid var(--line, #e3e8f0); transition: background var(--t-fast, 140ms ease); } ._recentItem_1t9j8_1695:last-child { border-bottom: none; } ._recentItem_1t9j8_1695:hover { background: var(--brand-soft, #eef4ff); } ._recentSearchIcon_1t9j8_1743 { width: 32px; height: 32px; display: inline-flex; align-items: center; justify-content: center; flex-shrink: 0; border-radius: var(--radius-full); background: var(--brand-soft); color: var(--brand, #0866ff); } ._recentContent_1t9j8_1777 { min-width: 0; display: flex; flex-direction: column; gap: 2px; } ._recentContent_1t9j8_1777 strong { color: var(--ink, #101b3d); font-size: var(--font-size-xs); font-weight: 600; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; } ._recentContent_1t9j8_1777 span { color: var(--ink-soft, #68738d); font-size: var(--font-size-xs); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; } /* ================================================================ RESPONSIVE ================================================================ */ @media (max-width: 1250px) { ._workspace_1t9j8_163 { grid-template-columns: minmax(0, 1fr) 270px; } ._summaryCard_1t9j8_679 { grid-template-columns: auto minmax(0, 1fr); } ._summaryActions_1t9j8_819 { grid-column: 1 / -1; padding-left: 98px; } } @media (max-width: 1000px) { ._workspace_1t9j8_163 { grid-template-columns: 1fr; } ._recentPanel_1t9j8_1547 { order: 2; } ._resultsTop_1t9j8_927 { align-items: flex-start; flex-direction: column; } ._filters_1t9j8_991 { width: 100%; flex-wrap: wrap; } } @media (max-width: 850px) { ._page_1t9j8_1 { padding: var(--space-4); } ._searchBox_1t9j8_229 { flex-wrap: wrap; } ._searchBox_1t9j8_229 input { min-width: calc(100% - 90px); } ._searchButton_1t9j8_457 { width: 100%; } ._summaryCard_1t9j8_679 { grid-template-columns: 1fr; } ._aiAvatar_1t9j8_705 { width: 64px; height: 64px; } ._aiAvatarRobot_1t9j8_739 { width: 48px; height: 48px; } ._summaryActions_1t9j8_819 { grid-column: auto; padding-left: 0; } ._resultItem_1t9j8_1139 { grid-template-columns: auto minmax(0, 1fr) auto; } ._relevance_1t9j8_1431 { display: none; } } @media (max-width: 560px) { ._page_1t9j8_1 { padding: var(--space-3); } ._brand_1t9j8_63 h1 { font-size: var(--font-size-xl); } ._quickSearches_1t9j8_545 { flex-wrap: nowrap; overflow-x: auto; padding-bottom: var(--space-1); } ._quickChip_1t9j8_561 { flex-shrink: 0; } ._filters_1t9j8_991 { display: grid; grid-template-columns: 1fr; } ._filterSelect_1t9j8_1005 { width: 100%; } ._filterSelect_1t9j8_1005 select { flex: 1; } ._resultItem_1t9j8_1139 { grid-template-columns: auto minmax(0, 1fr); } ._resultItem_1t9j8_1139 > ._moreButton_1t9j8_1473 { grid-column: 2; justify-self: end; } ._fileMeta_1t9j8_1393 { gap: var(--space-2); } } ._resultActions_1t9j8_2107, ._recentSearchActions_1t9j8_2109 { display: flex; align-items: center; gap: 8px; } ._iconBtn_1t9j8_2121 { width: 28px; height: 28px; border: 1px solid #e5e7eb; border-radius: 10px; background: #fff; color: #64748b; display: flex; align-items: center; justify-content: center; cursor: pointer; transition: all 0.2s ease; } ._iconBtn_1t9j8_2121:hover { background: #eff6ff; border-color: #2563eb; color: #2563eb; } ._limitControl_1t9j8_2161 { display: inline-flex; align-items: center; gap: 8px; height: 36px; padding: 0 10px; border: 1px solid var(--border-light); border-radius: 18px; background: var(--color-white); white-space: nowrap; flex-shrink: 0; } ._limitLabel_1t9j8_2187 { font-size: 13px; font-weight: 600; color: var(--text-primary); } ._limitControl_1t9j8_2161 input { width: 58px; height: 28px; padding: 0 6px; border: 1px solid var(--border-light); border-radius: 7px; outline: none; background: var(--color-white); color: var(--text-primary); font-size: 13px; font-weight: 600; text-align: center; } ._limitControl_1t9j8_2161 input:focus { border-color: var(--color-primary); box-shadow: 0 0 0 2px rgba(37, 99, 235, 0.08); } ._limitControl_1t9j8_2161 input:disabled { opacity: 0.6; cursor: not-allowed; } /* ========================================================= REVIEW CAMPAIGNS Uses global.css typography + design tokens ========================================================= */ /* ========================================================= STAT CARDS ========================================================= */ ._statsGrid_mnx4d_19 { width: 100%; display: grid; grid-template-columns: repeat(5, minmax(0, 1fr)); gap: 10px; margin-bottom: 12px; } ._statCard_mnx4d_41 { width: 100%; min-width: 0; min-height: 94px; display: flex; align-items: center; gap: 12px; padding: 12px 14px; border: 1px solid var(--border-light); border-radius: var(--radius-lg); background: var(--surface); box-sizing: border-box; box-shadow: var(--shadow-sm); transition: border-color var(--transition-fast), box-shadow var(--transition-fast), transform var(--transition-fast); } ._statCard_mnx4d_41:hover { transform: translateY(-1px); border-color: var(--border-default); box-shadow: var(--shadow-md); } /* ========================================================= STAT ICON ========================================================= */ ._statIcon_mnx4d_119 { width: 44px; height: 44px; flex: 0 0 44px; display: flex; align-items: center; justify-content: center; border: 1px solid transparent; border-radius: 50%; } ._statIcon_mnx4d_119 svg { width: 20px; height: 20px; stroke-width: 1.9; } ._statTotal_mnx4d_161 { color: var(--brand); border-color: rgba(8, 102, 255, 0.14); background: rgba(8, 102, 255, 0.07); } ._statAwaiting_mnx4d_177 { color: var(--warn); border-color: rgba(245, 158, 11, 0.17); background: rgba(245, 158, 11, 0.08); } ._statChanges_mnx4d_193 { color: var(--bad); border-color: rgba(255, 49, 57, 0.15); background: rgba(255, 49, 57, 0.07); } ._statApproved_mnx4d_209 { color: var(--ok); border-color: rgba(16, 185, 129, 0.15); background: rgba(16, 185, 129, 0.07); } ._statScheduled_mnx4d_225 { color: var(--brand); border-color: rgba(8, 102, 255, 0.14); background: rgba(8, 102, 255, 0.07); } /* ========================================================= STAT CONTENT ========================================================= */ ._statContent_mnx4d_249 { min-width: 0; display: flex; flex-direction: column; align-items: flex-start; } ._statLabel_mnx4d_265 { max-width: 100%; margin-bottom: 3px; overflow: hidden; color: var(--ink); font-size: var(--font-size-xs); font-weight: var(--font-weight-semibold); line-height: 1.35; text-overflow: ellipsis; white-space: nowrap; } ._statValue_mnx4d_299 { color: var(--ink); font-size: 24px; font-weight: var(--font-weight-bold); line-height: 1.05; letter-spacing: -0.45px; } ._valueAwaiting_mnx4d_317 { color: #d98900; } ._valueChanges_mnx4d_325 { color: var(--bad); } ._valueApproved_mnx4d_333 { color: #0f996a; } ._valueScheduled_mnx4d_341 { color: var(--brand); } /* ========================================================= STAT HINT ========================================================= */ ._statHint_mnx4d_357 { display: flex; align-items: center; gap: 5px; margin-top: 5px; color: var(--ink-muted); font-size: 11px; font-weight: var(--font-weight-medium); line-height: 1.35; white-space: nowrap; } ._statHint_mnx4d_357 i { width: 6px; height: 6px; flex: 0 0 6px; display: block; border-radius: 50%; } ._dotAwaiting_mnx4d_413 { background: var(--warn); } ._dotChanges_mnx4d_421 { background: var(--bad); } ._dotApproved_mnx4d_429 { background: var(--ok); } ._dotScheduled_mnx4d_437 { background: var(--brand); } /* ========================================================= REVIEW TOOLBAR ========================================================= */ ._reviewToolbar_mnx4d_453 { width: 100%; display: grid; grid-template-columns: minmax(520px, 1.25fr) minmax(400px, 0.95fr); align-items: stretch; gap: 10px; margin-bottom: 12px; } /* ========================================================= TABS ========================================================= */ ._tabs_mnx4d_491 { min-width: 0; min-height: 48px; display: flex; align-items: stretch; overflow-x: auto; overflow-y: hidden; padding: 0 8px; border: 1px solid var(--border-light); border-radius: var(--radius-md); background: var(--surface); box-sizing: border-box; scrollbar-width: none; } ._tabs_mnx4d_491::-webkit-scrollbar { display: none; } ._tabBtn_mnx4d_543 { min-width: max-content; height: 48px; position: relative; display: inline-flex; align-items: center; justify-content: center; gap: 6px; padding: 0 12px; border: 0; color: var(--ink-soft); background: transparent; font-family: inherit; font-size: var(--font-size-xs); font-weight: var(--font-weight-medium); cursor: pointer; transition: color var(--transition-fast), background var(--transition-fast); } ._tabBtn_mnx4d_543::after { content: ""; position: absolute; left: 9px; right: 9px; bottom: 0; height: 2px; border-radius: 2px 2px 0 0; background: transparent; } ._tabBtn_mnx4d_543:hover { color: var(--ink); background: var(--surface-muted); } ._tabActive_mnx4d_649 { color: var(--ink); font-weight: var(--font-weight-semibold); } ._tabActive_mnx4d_649::after { background: var(--bad); } ._tabCount_mnx4d_669 { min-width: 20px; height: 20px; display: inline-flex; align-items: center; justify-content: center; padding: 0 6px; border-radius: var(--radius-full); color: var(--ink-soft); background: var(--surface-muted); font-size: 10px; font-weight: var(--font-weight-semibold); } /* ========================================================= REVIEW ALERT ========================================================= */ ._reviewAlert_mnx4d_717 { min-width: 0; min-height: 48px; display: flex; align-items: center; justify-content: space-between; gap: 12px; padding: 8px 13px; border: 1px solid rgba(245, 158, 11, 0.16); border-radius: var(--radius-md); background: rgba(255, 247, 237, 0.82); box-sizing: border-box; } ._reviewAlertLeft_mnx4d_757 { min-width: 0; display: flex; align-items: center; gap: 8px; } ._reviewAlertLeft_mnx4d_757 > svg { width: 16px; height: 16px; flex: 0 0 16px; color: #f97316; } ._reviewAlertLeft_mnx4d_757 span { overflow: hidden; color: var(--ink-soft); font-size: var(--font-size-xs); font-weight: var(--font-weight-medium); line-height: 1.4; text-overflow: ellipsis; white-space: nowrap; } ._reviewAlertLeft_mnx4d_757 strong { color: var(--ink); font-weight: var(--font-weight-semibold); } ._reviewAlertRight_mnx4d_831 { flex-shrink: 0; display: flex; align-items: center; gap: 12px; } /* ========================================================= REVIEWER STACK ========================================================= */ ._reviewerStack_mnx4d_857 { display: flex; align-items: center; padding-left: 6px; } ._reviewerStack_mnx4d_857 span { width: 27px; height: 27px; display: inline-flex; align-items: center; justify-content: center; margin-left: -6px; border: 2px solid var(--surface); border-radius: 50%; color: var(--color-white); font-size: 9px; font-weight: var(--font-weight-bold); } ._stackOrange_mnx4d_909 { background: #fb6637; } ._stackBlue_mnx4d_917 { background: #1765bd; } ._stackGreen_mnx4d_925 { background: #238b4b; } /* ========================================================= OPEN REVIEW QUEUE ========================================================= */ ._openQueueButton_mnx4d_941 { display: inline-flex; align-items: center; justify-content: center; padding: 4px 0; border: 0; color: var(--bad); background: transparent; font-family: inherit; font-size: var(--font-size-xs); font-weight: var(--font-weight-semibold); cursor: pointer; white-space: nowrap; transition: color var(--transition-fast); } ._openQueueButton_mnx4d_941:hover { color: #dc2626; text-decoration: underline; } /* ========================================================= CAMPAIGN CELL ========================================================= */ ._campaignCell_mnx4d_1009 { min-width: 185px; display: flex; align-items: center; } ._campaignInfo_mnx4d_1023 { min-width: 0; display: flex; flex-direction: column; gap: 2px; } ._campaignName_mnx4d_1041 { max-width: 220px; overflow: hidden; color: var(--ink); font-size: var(--font-size-xs); font-weight: var(--font-weight-semibold); line-height: 1.4; text-overflow: ellipsis; white-space: nowrap; } ._campaignCategory_mnx4d_1071 { max-width: 220px; overflow: hidden; color: var(--ink-muted); font-size: 11px; font-weight: var(--font-weight-normal); line-height: 1.35; text-overflow: ellipsis; white-space: nowrap; } /* ========================================================= AUDIENCE ========================================================= */ ._audienceText_mnx4d_1109 { color: var(--ink-soft); font-size: var(--font-size-xs); font-weight: var(--font-weight-medium); white-space: nowrap; } /* ========================================================= CHANNELS ========================================================= */ ._channelGroup_mnx4d_1135 { min-width: 96px; display: flex; align-items: center; gap: 7px; } ._channelIcon_mnx4d_1153 { width: 20px; height: 20px; flex: 0 0 20px; display: inline-flex; align-items: center; justify-content: center; } ._channelIcon_mnx4d_1153 svg { width: 16px; height: 16px; } ._channelEmail_mnx4d_1185 { color: #1473e6; } ._channelSms_mnx4d_1193 { color: #219653; } ._channelWhatsapp_mnx4d_1201 { color: #16a34a; } ._channelInstagram_mnx4d_1209 { color: #e1306c; } ._channelVoice_mnx4d_1217 { color: #7136bd; } ._channelDefault_mnx4d_1225 { color: var(--ink-muted); } /* ========================================================= PERSON ========================================================= */ ._personCell_mnx4d_1241 { min-width: 120px; display: flex; align-items: center; gap: 8px; } ._personAvatar_mnx4d_1259 { width: 28px; height: 28px; flex: 0 0 28px; display: inline-flex; align-items: center; justify-content: center; border-radius: 50%; font-size: 9px; font-weight: var(--font-weight-bold); } ._personMeta_mnx4d_1291 { min-width: 0; display: flex; flex-direction: column; gap: 2px; } ._personMeta_mnx4d_1291 strong { max-width: 110px; overflow: hidden; color: var(--ink); font-size: var(--font-size-xs); font-weight: var(--font-weight-medium); line-height: 1.35; text-overflow: ellipsis; white-space: nowrap; } ._personMeta_mnx4d_1291 span { color: var(--ink-muted); font-size: 11px; font-weight: var(--font-weight-normal); white-space: nowrap; } ._reviewerName_mnx4d_1357 { max-width: 100px; overflow: hidden; color: var(--ink-soft); font-size: var(--font-size-xs); font-weight: var(--font-weight-medium); text-overflow: ellipsis; white-space: nowrap; } ._unassignedText_mnx4d_1385 { color: var(--ink-muted); font-size: var(--font-size-xs); white-space: nowrap; } /* ========================================================= AVATAR COLORS ========================================================= */ ._avatarPurpleSoft_mnx4d_1409 { color: #7c3aed; background: #ede9fe; } ._avatarBlueSoft_mnx4d_1421 { color: #2563eb; background: #dbeafe; } ._avatarCyanSoft_mnx4d_1433 { color: #0f766e; background: #ccfbf1; } ._avatarPinkSoft_mnx4d_1445 { color: #db2777; background: #fce7f3; } ._avatarOrange_mnx4d_1457 { color: var(--color-white); background: #fb6637; } ._avatarPurple_mnx4d_1409 { color: var(--color-white); background: #7436be; } ._avatarGray_mnx4d_1481 { color: var(--color-white); background: #94a3b8; } /* ========================================================= SCHEDULE ========================================================= */ ._scheduleText_mnx4d_1501 { color: var(--ink-soft); font-size: var(--font-size-xs); font-weight: var(--font-weight-medium); white-space: nowrap; } ._emptyValue_mnx4d_1519 { color: var(--ink-muted); font-size: var(--font-size-xs); white-space: nowrap; } /* ========================================================= GLOBAL BADGES ========================================================= */ .ct-badge { min-height: 24px; display: inline-flex; align-items: center; justify-content: center; padding: 3px 8px; border: 1px solid transparent; border-radius: var(--radius-sm); font-size: 11px; font-weight: var(--font-weight-semibold); line-height: 1.2; white-space: nowrap; } .ct-badge-success { border-color: rgba(16, 185, 129, 0.13); color: #0c8a5e; background: rgba(16, 185, 129, 0.1); } .ct-badge-info { border-color: rgba(8, 102, 255, 0.12); color: var(--brand); background: rgba(8, 102, 255, 0.09); } .ct-badge-warning { border-color: rgba(245, 158, 11, 0.14); color: #b56a00; background: rgba(245, 158, 11, 0.12); } .ct-badge-danger { border-color: rgba(255, 49, 57, 0.12); color: #dc3535; background: rgba(255, 49, 57, 0.1); } .ct-badge-neutral { border-color: rgba(104, 115, 141, 0.1); color: var(--ink-soft); background: var(--surface-muted); } /* ========================================================= ACTIONS ========================================================= */ .ct-action-group { display: inline-flex; align-items: center; gap: 5px; white-space: nowrap; } .ct-icon-action { width: 30px; height: 30px; flex: 0 0 30px; display: inline-flex; align-items: center; justify-content: center; padding: 0; border: 1px solid var(--border-light); border-radius: var(--radius-sm); color: var(--ink-soft); background: var(--surface); cursor: pointer; transition: color var(--transition-fast), background var(--transition-fast), border-color var(--transition-fast), transform var(--transition-fast); } .ct-icon-action svg { width: 14px; height: 14px; } .ct-icon-action:hover { transform: translateY(-1px); } /* VIEW */ .ct-icon-view:hover { border-color: rgba(8, 102, 255, 0.3); color: var(--brand); background: rgba(8, 102, 255, 0.07); } /* EDIT */ .ct-icon-edit:hover { border-color: rgba(245, 158, 11, 0.3); color: #d97706; background: rgba(245, 158, 11, 0.07); } /* DELETE */ .ct-icon-delete:hover { border-color: rgba(255, 49, 57, 0.3); color: var(--bad); background: rgba(255, 49, 57, 0.07); } .ct-icon-action:disabled { cursor: not-allowed; opacity: 0.5; transform: none; } /* ========================================================= DARK MODE ========================================================= */ [data-theme="dark"] ._reviewAlert_mnx4d_717, .dark ._reviewAlert_mnx4d_717 { border-color: rgba(245, 158, 11, 0.18); background: rgba(245, 158, 11, 0.07); } [data-theme="dark"] ._statTotal_mnx4d_161, .dark ._statTotal_mnx4d_161 { background: rgba(8, 102, 255, 0.14); } [data-theme="dark"] ._statAwaiting_mnx4d_177, .dark ._statAwaiting_mnx4d_177 { background: rgba(245, 158, 11, 0.11); } [data-theme="dark"] ._statChanges_mnx4d_193, .dark ._statChanges_mnx4d_193 { background: rgba(255, 49, 57, 0.11); } [data-theme="dark"] ._statApproved_mnx4d_209, .dark ._statApproved_mnx4d_209 { background: rgba(16, 185, 129, 0.11); } [data-theme="dark"] ._statScheduled_mnx4d_225, .dark ._statScheduled_mnx4d_225 { background: rgba(8, 102, 255, 0.13); } /* ========================================================= RESPONSIVE - 1300 ========================================================= */ @media (max-width: 1300px) { ._statsGrid_mnx4d_19 { gap: 8px; } ._statCard_mnx4d_41 { min-height: 90px; gap: 10px; padding: 11px 12px; } ._statIcon_mnx4d_119 { width: 40px; height: 40px; flex-basis: 40px; } ._statIcon_mnx4d_119 svg { width: 18px; height: 18px; } ._statValue_mnx4d_299 { font-size: 22px; } ._statLabel_mnx4d_265 { font-size: var(--font-size-xs); } ._statHint_mnx4d_357 { font-size: 11px; } } /* ========================================================= RESPONSIVE - 1150 ========================================================= */ @media (max-width: 1150px) { ._statsGrid_mnx4d_19 { grid-template-columns: repeat(3, minmax(0, 1fr)); } ._reviewToolbar_mnx4d_453 { grid-template-columns: 1fr; } ._reviewAlert_mnx4d_717 { min-height: 48px; } } /* ========================================================= RESPONSIVE - 850 ========================================================= */ @media (max-width: 850px) { ._statsGrid_mnx4d_19 { grid-template-columns: repeat(2, minmax(0, 1fr)); } ._campaignName_mnx4d_1041, ._personMeta_mnx4d_1291 strong, ._reviewerName_mnx4d_1357, ._audienceText_mnx4d_1109, ._scheduleText_mnx4d_1501, ._emptyValue_mnx4d_1519 { font-size: var(--font-size-xs); } } /* ========================================================= RESPONSIVE - 768 ========================================================= */ @media (max-width: 768px) { ._statCard_mnx4d_41 { min-height: 86px; } ._tabs_mnx4d_491 { min-height: 46px; } ._tabBtn_mnx4d_543 { height: 46px; padding: 0 10px; font-size: var(--font-size-xs); } ._reviewAlert_mnx4d_717 { min-height: 46px; } ._reviewAlertLeft_mnx4d_757 span, ._openQueueButton_mnx4d_941 { font-size: var(--font-size-xs); } } /* ========================================================= RESPONSIVE - 576 ========================================================= */ @media (max-width: 576px) { ._statsGrid_mnx4d_19 { grid-template-columns: 1fr; gap: 8px; } ._statCard_mnx4d_41 { min-height: 80px; padding: 10px 12px; } ._statIcon_mnx4d_119 { width: 40px; height: 40px; flex-basis: 40px; } ._statValue_mnx4d_299 { font-size: var(--font-size-xl); } ._reviewAlert_mnx4d_717 { align-items: flex-start; flex-direction: column; gap: 9px; padding: 10px 12px; } ._reviewAlertLeft_mnx4d_757 span { white-space: normal; } ._reviewAlertRight_mnx4d_831 { width: 100%; justify-content: space-between; } ._reviewerStack_mnx4d_857 span { width: 26px; height: 26px; font-size: 9px; } ._campaignName_mnx4d_1041 { max-width: 180px; } ._campaignCategory_mnx4d_1071 { max-width: 180px; } }/* ========================================================= REVIEW CAMPAIGNS ADD Uses global.css design tokens ========================================================= */ /* ========================================================= PAGE ========================================================= */ ._page_6e43a_17 { width: 100%; min-width: 0; padding: 18px 18px 24px; color: var(--ink); background: transparent; font-family: var(--font); font-size: var(--font-size-base); box-sizing: border-box; } /* ========================================================= PAGE HEADER ========================================================= */ ._pageHeader_6e43a_55 { width: 100%; min-width: 0; display: flex; align-items: flex-start; justify-content: space-between; gap: var(--space-5); margin-bottom: 14px; } ._pageHeader_6e43a_55 > div:first-child { min-width: 0; flex: 1; } /* slightly reduced from 26px */ ._pageHeader_6e43a_55 h1 { margin: 0; color: var(--ink); font-size: 20px; font-weight: var(--font-weight-bold); line-height: 1.2; letter-spacing: -0.35px; } /* slightly reduced */ ._pageHeader_6e43a_55 p { margin: 4px 0 0; color: var(--ink-soft); font-size: var(--font-size-sm); /* 13px */ font-weight: var(--font-weight-normal); line-height: 1.45; } /* ========================================================= BACK LINK ========================================================= */ ._backLink_6e43a_145 { display: inline-flex; align-items: center; justify-content: flex-start; gap: 5px; margin: 0 0 16px; padding: 0; border: 0; color: var(--brand); background: transparent; font-family: var(--font); font-size: var(--font-size-sm); font-weight: var(--font-weight-medium); line-height: 1.4; cursor: pointer; } ._backLink_6e43a_145 svg { width: 14px; height: 14px; flex: 0 0 14px; } ._backLink_6e43a_145:hover { color: var(--brand-hover); } /* ========================================================= HEADER ACTIONS ========================================================= */ ._headerActions_6e43a_221 { min-width: 0; flex-shrink: 0; display: flex; align-items: center; gap: 8px; } ._headerActions_6e43a_221 .app-btn { min-height: 36px; display: inline-flex; align-items: center; justify-content: center; gap: 6px; padding: 7px 12px; border-radius: var(--radius-md); font-size: var(--font-size-xs); font-weight: var(--font-weight-semibold); white-space: nowrap; } ._headerActions_6e43a_221 .app-btn svg { width: 14px; height: 14px; } /* ========================================================= TOP STEPPER ========================================================= */ ._topStepper_6e43a_297 { width: 100%; min-width: 0; display: flex; align-items: center; margin-bottom: var(--space-4); padding: 2px 3px 4px; overflow-x: auto; overflow-y: hidden; scrollbar-width: none; } ._topStepper_6e43a_297::-webkit-scrollbar { display: none; } ._topStepItem_6e43a_337 { min-width: 0; flex: 1; display: flex; align-items: center; } ._topStepCircle_6e43a_353 { width: 28px; height: 28px; flex: 0 0 28px; display: inline-flex; align-items: center; justify-content: center; padding: 0; border: 1px solid var(--border-medium); border-radius: var(--radius-full); color: var(--ink-soft); background: var(--surface); font-size: var(--font-size-xs); font-weight: var(--font-weight-bold); box-sizing: border-box; } ._topStepCircle_6e43a_353 svg { width: 14px; height: 14px; stroke-width: 3; } ._topStepComplete_6e43a_415 { border-color: var(--ok); color: var(--color-white); background: var(--ok); } ._topStepActive_6e43a_429 { border-color: var(--color-danger); color: var(--color-white); background: var(--color-danger); box-shadow: 0 0 0 4px rgba(255, 49, 57, 0.08); } ._topStepLabel_6e43a_447 { min-width: max-content; margin-left: 7px; color: var(--ink); font-size: var(--font-size-xs); font-weight: var(--font-weight-semibold); line-height: 1.4; white-space: nowrap; } ._topStepLabelActive_6e43a_475 { color: var(--color-danger); font-weight: var(--font-weight-bold); } ._topStepLine_6e43a_487 { height: 1px; flex: 1; min-width: 18px; margin: 0 12px; background: var(--border-default); } /* ========================================================= MAIN CONTENT GRID ========================================================= */ ._contentGrid_6e43a_519 { width: 100%; min-width: 0; display: grid; grid-template-columns: 225px minmax(0, 1fr) 310px; align-items: start; gap: var(--space-3); } /* ========================================================= COMMON CARDS ========================================================= */ ._setupCard_6e43a_557, ._previewCard_6e43a_559, ._messageDetailsCard_6e43a_561, ._sideCard_6e43a_563, ._bottomReviewBar_6e43a_565 { min-width: 0; border: 1px solid var(--border-light); border-radius: var(--radius-lg); background: var(--surface); box-shadow: var(--shadow-sm); box-sizing: border-box; } /* ========================================================= LEFT SETUP CARD ========================================================= */ ._setupCard_6e43a_557 { width: 100%; min-height: 610px; position: sticky; top: var(--space-3); display: flex; flex-direction: column; padding: 14px 10px 11px; } ._setupCard_6e43a_557 > h2 { margin: 0 8px 14px; color: var(--ink); font-size: var(--font-size-md); font-weight: var(--font-weight-bold); line-height: 1.4; } /* ========================================================= SETUP STEPS ========================================================= */ ._setupSteps_6e43a_653 { width: 100%; display: flex; flex-direction: column; gap: 4px; } ._setupStep_6e43a_653 { width: 100%; min-height: 60px; display: grid; grid-template-columns: 24px minmax(0, 1fr) auto; align-items: flex-start; gap: 8px; padding: 9px 8px; border-radius: var(--radius-md); box-sizing: border-box; transition: background var(--transition-fast); } ._setupStepActive_6e43a_717 { background: rgba(255, 49, 57, 0.08); } ._setupStepIcon_6e43a_725 { width: 22px; height: 22px; flex: 0 0 22px; display: inline-flex; align-items: center; justify-content: center; margin-top: 1px; border-radius: var(--radius-full); font-size: 11px; font-weight: var(--font-weight-bold); } ._setupStepIcon_6e43a_725 svg { width: 12px; height: 12px; stroke-width: 3; } ._setupStepComplete_6e43a_775 { color: var(--color-white); background: var(--ok); } ._setupStepCurrent_6e43a_785 { color: var(--color-white); background: var(--color-danger); } ._setupStepPending_6e43a_795 { border: 1px solid var(--border-medium); color: var(--ink-soft); background: var(--surface-muted); } ._setupStepContent_6e43a_809 { min-width: 0; display: flex; flex-direction: column; gap: 3px; padding-top: 1px; } ._setupStepContent_6e43a_809 strong { overflow: hidden; color: var(--ink); font-size: var(--font-size-sm); font-weight: var(--font-weight-semibold); line-height: 1.35; text-overflow: ellipsis; white-space: nowrap; } ._setupStepContent_6e43a_809 span { overflow: hidden; color: var(--ink-soft); font-size: var(--font-size-xs); font-weight: var(--font-weight-normal); line-height: 1.4; text-overflow: ellipsis; white-space: nowrap; } ._editLink_6e43a_883 { padding: 2px 0 0; border: 0; color: var(--brand); background: transparent; font-family: inherit; font-size: var(--font-size-xs); font-weight: var(--font-weight-semibold); cursor: pointer; } ._editLink_6e43a_883:hover { color: var(--brand-hover); text-decoration: underline; } /* ========================================================= LAST SAVED ========================================================= */ ._lastSaved_6e43a_933 { display: flex; align-items: center; gap: 6px; margin-top: auto; padding: 11px 7px 3px; color: var(--ink-soft); font-size: var(--font-size-xs); font-weight: var(--font-weight-normal); line-height: 1.4; } ._lastSaved_6e43a_933 svg { width: 13px; height: 13px; flex: 0 0 13px; } /* ========================================================= CENTER COLUMN ========================================================= */ ._previewColumn_6e43a_987 { width: 100%; min-width: 0; display: flex; flex-direction: column; gap: 10px; } /* ========================================================= PREVIEW CARD ========================================================= */ ._previewCard_6e43a_559 { width: 100%; min-width: 0; overflow: hidden; padding: 0 14px 13px; } /* ========================================================= PREVIEW HEADER ========================================================= */ ._previewHeader_6e43a_1041 { min-height: 50px; display: flex; align-items: center; justify-content: space-between; gap: 12px; border-bottom: 1px solid var(--border-light); } ._previewHeader_6e43a_1041 h2 { margin: 0; color: var(--ink); font-size: var(--font-size-lg); font-weight: var(--font-weight-bold); line-height: 1.4; white-space: nowrap; } /* ========================================================= VALIDATION BADGES ========================================================= */ ._validationBadges_6e43a_1097 { min-width: 0; display: flex; align-items: center; justify-content: flex-end; flex-wrap: wrap; gap: 5px; } ._validationBadges_6e43a_1097 > span { min-height: 28px; display: inline-flex; align-items: center; justify-content: center; gap: 4px; padding: 4px 8px; border: 1px solid rgba(16, 185, 129, 0.22); border-radius: var(--radius-sm); color: #059669; background: rgba(16, 185, 129, 0.06); font-size: var(--font-size-xs); font-weight: var(--font-weight-semibold); white-space: nowrap; } ._validationBadges_6e43a_1097 > span svg { width: 12px; height: 12px; } ._validationBadges_6e43a_1097 > button { min-height: 29px; display: inline-flex; align-items: center; justify-content: center; gap: 5px; padding: 4px 9px; border: 1px solid var(--border-default); border-radius: var(--radius-sm); color: var(--ink); background: var(--surface); font-family: inherit; font-size: var(--font-size-xs); font-weight: var(--font-weight-medium); cursor: pointer; white-space: nowrap; transition: border-color var(--transition-fast), background var(--transition-fast); } ._validationBadges_6e43a_1097 > button:hover { border-color: var(--border-medium); background: var(--surface-muted); } ._validationBadges_6e43a_1097 > button svg { width: 13px; height: 13px; } /* ========================================================= CHANNEL TABS ========================================================= */ ._channelTabs_6e43a_1265 { width: 100%; display: flex; align-items: stretch; overflow-x: auto; border-bottom: 1px solid var(--border-light); scrollbar-width: none; } ._channelTabs_6e43a_1265::-webkit-scrollbar { display: none; } ._channelTab_6e43a_1265 { min-width: max-content; height: 46px; position: relative; display: inline-flex; align-items: center; justify-content: center; gap: 7px; padding: 0 15px; border: 0; color: var(--ink-soft); background: transparent; font-family: inherit; font-size: var(--font-size-sm); font-weight: var(--font-weight-medium); cursor: pointer; transition: color var(--transition-fast), background var(--transition-fast); } ._channelTab_6e43a_1265::after { content: ""; position: absolute; left: 8px; right: 8px; bottom: -1px; height: 2px; background: transparent; } ._channelTab_6e43a_1265:hover { color: var(--ink); background: var(--surface-muted); } ._channelTab_6e43a_1265 svg { width: 17px; height: 17px; } ._channelTab_6e43a_1265:nth-child(1) svg { color: var(--color-danger); } ._channelTab_6e43a_1265:nth-child(2) svg { color: var(--brand); } ._channelTab_6e43a_1265:nth-child(3) svg { color: var(--ok); } ._channelTab_6e43a_1265:nth-child(4) svg { color: var(--brand); } ._channelTab_6e43a_1265:nth-child(5) svg { color: #7041c4; } ._channelTabActive_6e43a_1449 { color: var(--ink); font-weight: var(--font-weight-semibold); } ._channelTabActive_6e43a_1449::after { background: var(--color-danger); } /* ========================================================= PREVIEW MODE ========================================================= */ ._previewModeRow_6e43a_1477 { display: flex; align-items: center; gap: 7px; padding: 10px 0 9px; } ._previewModeRow_6e43a_1477 button { min-width: 92px; height: 32px; display: inline-flex; align-items: center; justify-content: center; gap: 6px; padding: 0 11px; border: 1px solid var(--border-default); border-radius: var(--radius-sm); color: var(--ink); background: var(--surface); font-family: inherit; font-size: var(--font-size-xs); font-weight: var(--font-weight-medium); cursor: pointer; } ._previewModeRow_6e43a_1477 button svg { width: 14px; height: 14px; } ._previewModeRow_6e43a_1477 button:hover { background: var(--surface-muted); } ._previewModeRow_6e43a_1477 ._previewModeActive_6e43a_1563 { border-color: rgba(255, 49, 57, 0.45); color: var(--ink); background: rgba(255, 49, 57, 0.07); } /* ========================================================= PREVIEW BODY ========================================================= */ ._previewBody_6e43a_1587 { width: 100%; min-width: 0; } /* ========================================================= EMAIL META ========================================================= */ ._emailMeta_6e43a_1605 { display: flex; flex-direction: column; gap: 7px; margin-bottom: 12px; } ._emailMetaRow_6e43a_1623 { display: grid; grid-template-columns: 92px minmax(0, 1fr); align-items: center; gap: 10px; color: var(--ink-soft); font-size: var(--font-size-base); line-height: 1.45; } ._emailMetaRow_6e43a_1623 strong { color: var(--ink); font-size: var(--font-size-sm); font-weight: var(--font-weight-semibold); } ._emailMetaRow_6e43a_1623 span { overflow: hidden; color: var(--ink); font-size: var(--font-size-base); font-weight: var(--font-weight-normal); text-overflow: ellipsis; white-space: nowrap; } /* ========================================================= EMAIL PREVIEW SHELL ========================================================= */ ._emailPreviewShell_6e43a_1697 { width: 100%; overflow: hidden; margin: 0 auto; border: 1px solid var(--border-default); border-radius: var(--radius-md); background: var(--surface); box-sizing: border-box; transition: width var(--transition-base), max-width var(--transition-base); } ._emailPreviewMobile_6e43a_1735 { width: 370px; max-width: 100%; } /* ========================================================= EMAIL PREVIEW HEADER ========================================================= */ ._emailPreviewHeader_6e43a_1753 { height: 42px; display: flex; align-items: center; gap: 7px; padding: 0 18px; color: var(--ink); background: var(--surface); } ._emailBrand_6e43a_1781 { color: var(--color-danger); font-size: var(--font-size-xl); font-weight: var(--font-weight-bold); } ._emailPreviewHeader_6e43a_1753 strong { font-size: var(--font-size-sm); font-weight: var(--font-weight-bold); } /* ========================================================= EMAIL HERO ========================================================= */ ._emailHero_6e43a_1813 { min-height: 235px; position: relative; display: grid; grid-template-columns: minmax(0, 0.9fr) minmax(235px, 1.1fr); align-items: center; overflow: hidden; padding: 28px; color: var(--color-white); background: radial-gradient( circle at 70% 45%, rgba(30, 108, 205, 0.36), transparent 35% ), linear-gradient( 125deg, #072652 0%, #053870 47%, #082654 100% ); } ._emailHero_6e43a_1813::before { content: ""; position: absolute; width: 235px; height: 235px; top: -82px; right: -77px; border-radius: 50%; background: rgba(255, 79, 67, 0.96); } ._emailHero_6e43a_1813::after { content: ""; position: absolute; width: 270px; height: 140px; right: -95px; top: 17px; border-radius: 50%; background: rgba(11, 53, 109, 0.64); transform: rotate(18deg); } /* ========================================================= EMAIL HERO CONTENT ========================================================= */ ._emailHeroContent_6e43a_1953 { position: relative; z-index: 3; } ._emailHeroContent_6e43a_1953 h2 { margin: 0 0 13px; color: var(--color-white); font-size: 25px; font-weight: var(--font-weight-bold); line-height: 1.2; letter-spacing: -0.3px; } ._emailHeroContent_6e43a_1953 p { max-width: 330px; margin: 0 0 18px; color: rgba(255, 255, 255, 0.94); font-size: var(--font-size-sm); font-weight: var(--font-weight-normal); line-height: 1.65; } ._emailHeroContent_6e43a_1953 button { min-height: 36px; padding: 0 16px; border: 0; border-radius: var(--radius-sm); color: var(--color-white); background: #ff4c40; font-family: inherit; font-size: var(--font-size-sm); font-weight: var(--font-weight-semibold); cursor: pointer; box-shadow: 0 5px 12px rgba(255, 76, 64, 0.2); } ._emailHeroContent_6e43a_1953 button:hover { background: #ed3e34; } /* ========================================================= EMAIL HERO VISUAL ========================================================= */ ._emailHeroVisual_6e43a_2067 { min-height: 180px; position: relative; z-index: 3; } /* ========================================================= DASHBOARD MOCK ========================================================= */ ._dashboardMock_6e43a_2091 { width: 205px; height: 125px; position: absolute; left: 50%; bottom: 5px; overflow: visible; border: 5px solid #d9e1e9; border-bottom-width: 8px; border-radius: 5px; background: var(--surface); box-shadow: 0 10px 22px rgba(0, 15, 45, 0.38); transform: translateX(-50%); } ._dashboardMock_6e43a_2091::before { content: ""; position: absolute; left: 50%; bottom: -13px; width: 240px; height: 6px; border-radius: 0 0 8px 8px; background: #77889c; transform: translateX(-50%); } ._dashboardMock_6e43a_2091::after { content: ""; position: absolute; left: 50%; bottom: -16px; width: 164px; height: 3px; border-radius: 50%; background: rgba(3, 13, 31, 0.4); filter: blur(2px); transform: translateX(-50%); } ._dashboardMockTop_6e43a_2211 { height: 14px; display: flex; align-items: center; gap: 3px; padding: 0 5px; border-bottom: 1px solid var(--border-light); background: var(--surface-muted); } ._dashboardMockTop_6e43a_2211 span { width: 3px; height: 3px; border-radius: 50%; background: #bbc5d2; } ._dashboardMockBody_6e43a_2259 { height: calc(100% - 14px); display: flex; } ._dashboardMockSide_6e43a_2271 { width: 31px; display: flex; flex-direction: column; gap: 7px; padding: 8px 5px; border-right: 1px solid var(--border-light); background: var(--surface-muted); } ._dashboardMockSide_6e43a_2271 i { height: 3px; border-radius: 2px; background: #bdc7d3; } ._dashboardMockMain_6e43a_2317 { min-width: 0; flex: 1; padding: 8px; } ._mockCards_6e43a_2331 { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 4px; } ._mockCards_6e43a_2331 span { height: 22px; border-radius: 2px; background: #edf4ff; } ._mockChart_6e43a_2361 { height: 53px; margin-top: 8px; color: var(--brand); background: linear-gradient(#edf1f6 1px, transparent 1px) 0 0 / 100% 17px; } ._mockChart_6e43a_2361 svg { width: 100%; height: 100%; } /* ========================================================= HERO BUBBLES ========================================================= */ ._heroBubble_6e43a_2403 { width: 38px; height: 38px; position: absolute; z-index: 5; display: flex; align-items: center; justify-content: center; border: 2px solid rgba(255, 255, 255, 0.24); border-radius: 50%; color: var(--color-white); box-shadow: 0 5px 10px rgba(2, 15, 39, 0.25); } ._heroBubble_6e43a_2403 svg { width: 18px; height: 18px; } ._heroBubbleMail_6e43a_2453 { top: 5px; left: 22%; background: #ff594d; } ._heroBubbleWhatsapp_6e43a_2467 { top: -1px; left: 52%; background: #2db94f; } ._heroBubbleSms_6e43a_2481 { top: 13px; right: 9%; background: #3479ef; } ._heroBubbleVoice_6e43a_2495 { left: 8%; bottom: 33px; background: #704acb; } ._heroBubbleSocial_6e43a_2509 { right: 2%; bottom: 31px; background: #3777e8; } /* ========================================================= EMAIL FOOTER ========================================================= */ ._emailPreviewFooter_6e43a_2531 { min-height: 38px; display: flex; align-items: center; justify-content: center; flex-wrap: wrap; gap: 4px; padding: 8px 10px; color: var(--ink-soft); background: var(--surface); font-size: var(--font-size-xs); font-weight: var(--font-weight-normal); line-height: 1.5; text-align: center; } ._emailPreviewFooter_6e43a_2531 button { padding: 0; border: 0; color: var(--brand); background: transparent; font-family: inherit; font-size: inherit; font-weight: var(--font-weight-semibold); cursor: pointer; } /* ========================================================= MOBILE EMAIL PREVIEW ========================================================= */ ._emailPreviewMobile_6e43a_1735 ._emailHero_6e43a_1813 { grid-template-columns: 1fr; min-height: 425px; padding: 24px 20px; } ._emailPreviewMobile_6e43a_1735 ._emailHeroContent_6e43a_1953 h2 { font-size: 23px; } ._emailPreviewMobile_6e43a_1735 ._emailHeroContent_6e43a_1953 p { font-size: var(--font-size-sm); } ._emailPreviewMobile_6e43a_1735 ._emailHeroVisual_6e43a_2067 { min-height: 175px; margin-top: 17px; } /* ========================================================= GENERIC MESSAGE PREVIEW ========================================================= */ ._messagePreview_6e43a_2663 { min-height: 365px; display: flex; align-items: center; justify-content: center; padding: 24px; background: var(--surface-muted); } /* ========================================================= PHONE PREVIEW ========================================================= */ ._phonePreview_6e43a_2695 { width: 250px; min-height: 420px; overflow: hidden; border: 6px solid #172033; border-radius: 26px; background: #f7f8fa; box-shadow: var(--shadow-lg); } ._phoneTop_6e43a_2723 { width: 78px; height: 15px; margin: 0 auto; border-radius: 0 0 10px 10px; background: #172033; } ._phoneHeader_6e43a_2745 { min-height: 56px; display: flex; align-items: center; gap: 9px; padding: 10px 12px; border-bottom: 1px solid var(--border-light); background: var(--surface); } ._phoneAvatar_6e43a_2775, ._whatsappAvatar_6e43a_2777 { width: 32px; height: 32px; flex: 0 0 32px; display: flex; align-items: center; justify-content: center; border-radius: 50%; color: var(--color-white); background: var(--color-danger); font-size: var(--font-size-xs); font-weight: var(--font-weight-bold); } ._whatsappAvatar_6e43a_2777 { background: #25d366; } ._phoneHeader_6e43a_2745 div { min-width: 0; display: flex; flex-direction: column; gap: 2px; } ._phoneHeader_6e43a_2745 strong { color: var(--ink); font-size: var(--font-size-sm); font-weight: var(--font-weight-semibold); } ._phoneHeader_6e43a_2745 span { color: var(--ink-soft); font-size: var(--font-size-xs); } /* ========================================================= SMS ========================================================= */ ._smsBubble_6e43a_2875 { width: 82%; margin: 30px auto 0; padding: 13px; border-radius: 10px 10px 10px 3px; color: var(--ink); background: #e7ebf0; font-size: var(--font-size-sm); line-height: 1.6; } /* ========================================================= WHATSAPP ========================================================= */ ._whatsappHeader_6e43a_2915 { background: #075e54; } ._whatsappHeader_6e43a_2915 strong, ._whatsappHeader_6e43a_2915 span { color: var(--color-white); } ._whatsappCanvas_6e43a_2933 { min-height: 335px; padding: 29px 12px; background: #efeae2; } ._whatsappBubble_6e43a_2949 { width: 87%; margin-left: auto; padding: 13px; border-radius: 9px 3px 9px 9px; color: #1f2937; background: #dcf8c6; font-size: var(--font-size-sm); } ._whatsappBubble_6e43a_2949 strong { font-size: var(--font-size-base); } ._whatsappBubble_6e43a_2949 p { margin: 8px 0; line-height: 1.6; } ._whatsappBubble_6e43a_2949 button { width: 100%; margin-top: 5px; padding: 8px; border: 0; border-top: 1px solid rgba(15, 23, 42, 0.08); color: #168f78; background: transparent; font-size: var(--font-size-xs); font-weight: var(--font-weight-semibold); } /* ========================================================= SOCIAL PREVIEW ========================================================= */ ._socialPreview_6e43a_3039 { width: min(440px, 100%); margin: 24px auto; overflow: hidden; border: 1px solid var(--border-light); border-radius: var(--radius-md); background: var(--surface); } ._socialPreviewHeader_6e43a_3065 { display: flex; align-items: center; gap: 10px; padding: 12px; } ._socialPreviewHeader_6e43a_3065 > span { width: 35px; height: 35px; display: flex; align-items: center; justify-content: center; border-radius: 50%; color: var(--color-white); background: var(--color-danger); font-size: var(--font-size-sm); font-weight: var(--font-weight-bold); } ._socialPreviewHeader_6e43a_3065 div { display: flex; flex-direction: column; gap: 2px; } ._socialPreviewHeader_6e43a_3065 strong { color: var(--ink); font-size: var(--font-size-sm); } ._socialPreviewHeader_6e43a_3065 small { color: var(--ink-soft); font-size: var(--font-size-xs); } ._socialPreview_6e43a_3039 > p { margin: 0; padding: 0 12px 12px; color: var(--ink-soft); font-size: var(--font-size-sm); line-height: 1.6; } ._socialArtwork_6e43a_3179 { min-height: 205px; display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 10px; padding: 20px; color: var(--color-white); background: radial-gradient( circle at 80% 20%, rgba(255, 80, 70, 0.75), transparent 29% ), linear-gradient(135deg, #062452, #0b4c98); } ._socialArtwork_6e43a_3179 strong { font-size: 23px; font-weight: var(--font-weight-bold); text-align: center; } ._socialArtwork_6e43a_3179 span { color: rgba(255, 255, 255, 0.88); font-size: var(--font-size-xs); } ._socialActions_6e43a_3251 { display: grid; grid-template-columns: repeat(3, 1fr); border-top: 1px solid var(--border-light); } ._socialActions_6e43a_3251 span { padding: 10px; color: var(--ink-soft); font-size: var(--font-size-xs); text-align: center; } /* ========================================================= VOICE PREVIEW ========================================================= */ ._voicePreview_6e43a_3291 { min-height: 340px; display: flex; flex-direction: column; align-items: center; justify-content: center; padding: 28px; text-align: center; } ._voicePreviewIcon_6e43a_3317 { width: 56px; height: 56px; display: flex; align-items: center; justify-content: center; margin-bottom: 15px; border-radius: 50%; color: #6d35c4; background: rgba(109, 53, 196, 0.09); } ._voicePreviewIcon_6e43a_3317 svg { width: 25px; height: 25px; } ._voicePreview_6e43a_3291 h3 { margin: 0 0 8px; color: var(--ink); font-size: var(--font-size-lg); font-weight: var(--font-weight-bold); } ._voicePreview_6e43a_3291 p { max-width: 470px; margin: 0; color: var(--ink-soft); font-size: var(--font-size-sm); line-height: 1.7; } ._waveform_6e43a_3401 { height: 54px; display: flex; align-items: center; gap: 3px; margin: 20px 0; } ._waveform_6e43a_3401 span { width: 3px; display: block; border-radius: 4px; background: #6d35c4; } ._voicePreview_6e43a_3291 button { min-height: 35px; padding: 0 14px; border: 1px solid var(--border-default); border-radius: var(--radius-sm); color: var(--ink); background: var(--surface); font-size: var(--font-size-sm); font-weight: var(--font-weight-semibold); } /* ========================================================= MESSAGE DETAILS CARD ========================================================= */ ._messageDetailsCard_6e43a_561 { padding: 13px 14px; } ._sectionHeader_6e43a_3489, ._sideCardHeader_6e43a_3491 { display: flex; align-items: center; justify-content: space-between; gap: 9px; } ._sectionHeader_6e43a_3489 { margin-bottom: 11px; } ._sectionHeader_6e43a_3489 h3, ._sideCardHeader_6e43a_3491 h3 { margin: 0; color: var(--ink); font-size: var(--font-size-base); font-weight: var(--font-weight-bold); line-height: 1.4; } ._sectionHeader_6e43a_3489 button, ._sideCardHeader_6e43a_3491 button { display: inline-flex; align-items: center; gap: 4px; padding: 0; border: 0; color: var(--brand); background: transparent; font-family: inherit; font-size: var(--font-size-xs); font-weight: var(--font-weight-semibold); cursor: pointer; } ._sectionHeader_6e43a_3489 button:hover, ._sideCardHeader_6e43a_3491 button:hover { color: var(--brand-hover); text-decoration: underline; } ._sectionHeader_6e43a_3489 button svg { width: 13px; height: 13px; } /* ========================================================= MESSAGE DETAILS GRID ========================================================= */ ._messageDetailsGrid_6e43a_3611 { width: 100%; display: grid; grid-template-columns: 0.95fr 1.25fr 0.85fr 1.35fr; border-top: 1px solid var(--border-light); } ._messageDetailsGrid_6e43a_3611 > div { min-width: 0; display: flex; flex-direction: column; gap: 5px; padding: 10px 11px; border-right: 1px solid var(--border-light); } ._messageDetailsGrid_6e43a_3611 > div:last-child { border-right: 0; } ._messageDetailsGrid_6e43a_3611 span { color: var(--ink-soft); font-size: var(--font-size-xs); font-weight: var(--font-weight-medium); line-height: 1.4; } ._messageDetailsGrid_6e43a_3611 strong { overflow: hidden; color: var(--ink); font-size: var(--font-size-sm); font-weight: var(--font-weight-medium); line-height: 1.4; text-overflow: ellipsis; white-space: nowrap; } ._attachmentValue_6e43a_3713 { display: flex; align-items: center; gap: 5px; } ._attachmentValue_6e43a_3713 svg { width: 13px; height: 13px; flex: 0 0 13px; } /* ========================================================= RIGHT COLUMN ========================================================= */ ._rightColumn_6e43a_3749 { width: 100%; min-width: 0; display: flex; flex-direction: column; gap: 9px; } /* ========================================================= SIDE CARD ========================================================= */ ._sideCard_6e43a_563 { width: 100%; padding: 13px 14px; } ._sideCardHeader_6e43a_3491 { min-height: 24px; margin-bottom: 12px; } /* ========================================================= DETAIL ROWS ========================================================= */ ._detailRows_6e43a_3809 { width: 100%; display: flex; flex-direction: column; gap: 9px; } ._detailRows_6e43a_3809 > div { width: 100%; display: grid; grid-template-columns: 112px minmax(0, 1fr); align-items: start; gap: 8px; } ._detailRows_6e43a_3809 span { color: var(--ink-soft); font-size: var(--font-size-xs); font-weight: var(--font-weight-normal); line-height: 1.45; } ._detailRows_6e43a_3809 strong { min-width: 0; color: var(--ink); font-size: var(--font-size-sm); font-weight: var(--font-weight-medium); line-height: 1.45; overflow-wrap: anywhere; } ._detailRows_6e43a_3809 em { display: inline-flex; align-items: center; width: fit-content; min-height: 22px; padding: 3px 7px; border: 1px solid rgba(255, 49, 57, 0.22); border-radius: var(--radius-sm); color: var(--color-danger); background: rgba(255, 49, 57, 0.07); font-style: normal; font-size: var(--font-size-xs); font-weight: var(--font-weight-medium); } ._complianceText_6e43a_3931 { display: inline-flex; align-items: center; gap: 5px; color: #059669 !important; } ._complianceText_6e43a_3931 svg { width: 13px; height: 13px; flex: 0 0 13px; } /* ========================================================= SELECTED CHANNELS ========================================================= */ ._selectedChannels_6e43a_3971 { width: 100%; display: flex; flex-direction: column; gap: 10px; } ._selectedChannels_6e43a_3971 > div { width: 100%; min-width: 0; display: grid; grid-template-columns: 20px 82px 62px minmax(0, 1fr); align-items: center; gap: 6px; } ._smallChannelIcon_6e43a_4021 { display: flex; align-items: center; justify-content: center; } ._smallChannelIcon_6e43a_4021 svg { width: 16px; height: 16px; } ._channelEmail_6e43a_4043 { color: var(--color-danger); } ._channelSms_6e43a_4051 { color: var(--brand); } ._channelWhatsapp_6e43a_4059 { color: var(--ok); } ._channelSocial_6e43a_4067 { color: var(--brand); } ._channelVoice_6e43a_4075 { color: #7341c7; } ._selectedChannels_6e43a_3971 strong { color: var(--ink); font-size: var(--font-size-xs); font-weight: var(--font-weight-semibold); line-height: 1.4; white-space: nowrap; } ._selectedChannels_6e43a_3971 em { color: #059669; font-style: normal; font-size: 11px; font-weight: var(--font-weight-medium); white-space: nowrap; } ._selectedChannels_6e43a_3971 small { min-width: 0; overflow: hidden; color: var(--ink-soft); font-size: 11px; font-weight: var(--font-weight-normal); line-height: 1.4; text-overflow: ellipsis; white-space: nowrap; } ._selectedChannels_6e43a_3971 ._notSelected_6e43a_4155 { color: var(--ink-muted); } /* ========================================================= SCHEDULE ========================================================= */ ._scheduleContent_6e43a_4171 { width: 100%; display: grid; grid-template-columns: 1.05fr 0.95fr; align-items: start; gap: 12px; } ._scheduleChoices_6e43a_4197 { min-width: 0; display: flex; flex-direction: column; gap: 7px; } ._scheduleChoices_6e43a_4197 button { width: 100%; min-height: 37px; display: flex; align-items: center; gap: 8px; padding: 7px 8px; border: 1px solid var(--border-default); border-radius: var(--radius-sm); color: var(--ink); background: var(--surface); font-family: inherit; font-size: 11px; font-weight: var(--font-weight-medium); line-height: 1.4; text-align: left; cursor: pointer; box-sizing: border-box; } ._scheduleChoices_6e43a_4197 button > span { width: 14px; height: 14px; flex: 0 0 14px; display: flex; align-items: center; justify-content: center; border: 1px solid var(--border-medium); border-radius: 50%; } ._scheduleChoices_6e43a_4197 button > span i { width: 6px; height: 6px; border-radius: 50%; background: var(--color-danger); } ._scheduleChoices_6e43a_4197 ._scheduleChoiceActive_6e43a_4317 { border-color: rgba(255, 49, 57, 0.6); color: var(--ink); background: rgba(255, 49, 57, 0.04); } ._scheduleChoices_6e43a_4197 ._scheduleChoiceActive_6e43a_4317 > span { border-color: var(--color-danger); } /* ========================================================= SCHEDULE DETAILS ========================================================= */ ._scheduleDetails_6e43a_4349 { min-width: 0; display: flex; flex-direction: column; gap: 9px; } ._scheduleDetails_6e43a_4349 > div { display: flex; flex-direction: column; gap: 2px; } ._scheduleDetails_6e43a_4349 span { color: var(--ink-soft); font-size: 11px; line-height: 1.3; } ._scheduleDetails_6e43a_4349 strong { color: var(--ink); font-size: var(--font-size-xs); font-weight: var(--font-weight-medium); line-height: 1.4; } /* ========================================================= CUSTOM CHECKBOXES ========================================================= */ ._timezoneCheckbox_6e43a_4419, ._confirmCheck_6e43a_4421 { position: relative; display: flex; align-items: center; gap: 8px; cursor: pointer; } ._timezoneCheckbox_6e43a_4419 { margin-top: 13px; color: var(--ink-soft); font-size: var(--font-size-xs); line-height: 1.45; } ._timezoneCheckbox_6e43a_4419 input, ._confirmCheck_6e43a_4421 input { position: absolute; width: 1px; height: 1px; opacity: 0; pointer-events: none; } ._customCheckbox_6e43a_4485, ._confirmBox_6e43a_4487 { display: inline-flex; align-items: center; justify-content: center; border: 1px solid var(--border-medium); border-radius: 3px; color: var(--color-white); background: var(--surface); box-sizing: border-box; } ._customCheckbox_6e43a_4485 { width: 16px; height: 16px; flex: 0 0 16px; } ._confirmBox_6e43a_4487 { width: 20px; height: 20px; flex: 0 0 20px; } ._timezoneCheckbox_6e43a_4419 input:checked + ._customCheckbox_6e43a_4485, ._confirmCheck_6e43a_4421 input:checked + ._confirmBox_6e43a_4487 { border-color: var(--color-danger); background: var(--color-danger); } ._customCheckbox_6e43a_4485 svg, ._confirmBox_6e43a_4487 svg { width: 12px; height: 12px; stroke-width: 3; } /* ========================================================= BOTTOM REVIEW BAR ========================================================= */ ._bottomReviewBar_6e43a_565 { width: 100%; min-width: 0; display: grid; /* Important: Last column can shrink properly. This prevents Submit for Review overflow. */ grid-template-columns: minmax(220px, 0.85fr) minmax(270px, 1fr) minmax(0, auto); align-items: center; gap: 12px; margin-top: var(--space-3); padding: 13px 14px; overflow: hidden; } /* ========================================================= READY STATUS ========================================================= */ ._readyState_6e43a_4645 { min-width: 0; display: flex; align-items: center; gap: 11px; } ._readyIcon_6e43a_4663 { width: 44px; height: 44px; flex: 0 0 44px; display: flex; align-items: center; justify-content: center; border: 1px solid rgba(16, 185, 129, 0.14); border-radius: 50%; color: var(--ok); background: rgba(16, 185, 129, 0.08); } ._readyIcon_6e43a_4663 svg { width: 21px; height: 21px; } ._readyState_6e43a_4645 > div { min-width: 0; display: flex; align-items: center; flex-wrap: wrap; gap: 4px; } ._readyState_6e43a_4645 strong { color: var(--ink); font-size: var(--font-size-xs); font-weight: var(--font-weight-bold); line-height: 1.4; white-space: nowrap; } ._readyState_6e43a_4645 div span { color: var(--ink-soft); font-size: 11px; line-height: 1.4; white-space: nowrap; } ._readyState_6e43a_4645 div span::before { content: "·"; margin-right: 4px; } /* ========================================================= CONFIRM CHECK ========================================================= */ ._confirmCheck_6e43a_4421 { min-width: 0; min-height: 44px; position: relative; display: flex; align-items: center; gap: 8px; padding-left: 15px; border-left: 1px solid var(--border-light); color: var(--ink); font-size: var(--font-size-xs); font-weight: var(--font-weight-normal); line-height: 1.45; cursor: pointer; } ._confirmCheck_6e43a_4421 input { position: absolute; width: 1px; height: 1px; opacity: 0; pointer-events: none; } ._confirmBox_6e43a_4487 { width: 19px; height: 19px; flex: 0 0 19px; display: inline-flex; align-items: center; justify-content: center; border: 1px solid var(--border-medium); border-radius: 3px; color: var(--color-white); background: var(--surface); box-sizing: border-box; } ._confirmCheck_6e43a_4421 input:checked + ._confirmBox_6e43a_4487 { border-color: var(--color-danger); background: var(--color-danger); } ._confirmBox_6e43a_4487 svg { width: 11px; height: 11px; stroke-width: 3; } /* ========================================================= BOTTOM ACTIONS FIXED OVERLAP ========================================================= */ ._bottomActions_6e43a_4931 { width: 100%; min-width: 0; max-width: 100%; display: grid; /* Three action buttons in one clean row. */ grid-template-columns: max-content max-content max-content; align-items: center; justify-content: end; gap: 7px; box-sizing: border-box; } ._bottomActions_6e43a_4931 .app-btn { min-width: 0; min-height: 38px; display: inline-flex; align-items: center; justify-content: center; gap: 6px; padding: 7px 13px; border-radius: var(--radius-md); font-size: var(--font-size-xs); font-weight: var(--font-weight-semibold); line-height: 1.2; white-space: nowrap; box-sizing: border-box; } /* Back to Message */ ._bottomActions_6e43a_4931 .app-btn-secondary { min-width: 126px; } /* Submit for Review */ ._bottomActions_6e43a_4931 .app-btn-primary { min-width: 150px; } ._bottomActions_6e43a_4931 .app-btn svg { width: 14px; height: 14px; flex: 0 0 14px; } /* ========================================================= REVIEW NOTE ========================================================= */ ._reviewNote_6e43a_5065 { width: 100%; min-width: 0; grid-column: 1 / -1; margin-top: 1px; overflow: hidden; color: var(--ink-soft); font-size: 11px; line-height: 1.4; text-align: right; text-overflow: ellipsis; white-space: nowrap; } /* ========================================================= RESPONSIVE - LARGE LAPTOP ========================================================= */ @media (max-width: 1450px) { ._bottomReviewBar_6e43a_565 { grid-template-columns: minmax(210px, 0.8fr) minmax(250px, 1fr) minmax(390px, auto); gap: 10px; padding: 12px 13px; } ._readyIcon_6e43a_4663 { width: 42px; height: 42px; flex-basis: 42px; } ._readyIcon_6e43a_4663 svg { width: 20px; height: 20px; } ._bottomActions_6e43a_4931 { gap: 6px; } ._bottomActions_6e43a_4931 .app-btn { min-height: 36px; padding: 6px 11px; font-size: 11px; } ._bottomActions_6e43a_4931 .app-btn-secondary { min-width: 116px; } ._bottomActions_6e43a_4931 .app-btn-primary { min-width: 142px; } } /* ========================================================= RESPONSIVE - 1250 ========================================================= */ @media (max-width: 1250px) { ._bottomReviewBar_6e43a_565 { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 12px; } ._bottomActions_6e43a_4931 { grid-column: 1 / -1; width: 100%; grid-template-columns: max-content max-content max-content; justify-content: end; } ._reviewNote_6e43a_5065 { grid-column: 1 / -1; text-align: right; } } /* ========================================================= RESPONSIVE - TABLET ========================================================= */ @media (max-width: 950px) { ._page_6e43a_17 { padding: 16px 14px 22px; } ._pageHeader_6e43a_55 h1 { font-size: 23px; } ._bottomReviewBar_6e43a_565 { grid-template-columns: 1fr; gap: 12px; } ._confirmCheck_6e43a_4421 { padding: 11px 0 0; border-top: 1px solid var(--border-light); border-left: 0; } ._bottomActions_6e43a_4931 { grid-column: auto; grid-template-columns: repeat(3, max-content); justify-content: start; } ._reviewNote_6e43a_5065 { text-align: left; } } /* ========================================================= RESPONSIVE - MOBILE ========================================================= */ @media (max-width: 700px) { ._page_6e43a_17 { padding: 14px 12px 20px; } ._pageHeader_6e43a_55 h1 { font-size: 22px; } ._pageHeader_6e43a_55 p { font-size: var(--font-size-xs); } ._bottomActions_6e43a_4931 { width: 100%; grid-template-columns: 1fr; } ._bottomActions_6e43a_4931 .app-btn, ._bottomActions_6e43a_4931 .app-btn-secondary, ._bottomActions_6e43a_4931 .app-btn-primary { width: 100%; min-width: 0; } ._reviewNote_6e43a_5065 { grid-column: 1; white-space: normal; text-align: left; } } /* ========================================================= SMALL MOBILE ========================================================= */ @media (max-width: 480px) { ._pageHeader_6e43a_55 h1 { font-size: var(--font-size-2xl); } ._pageHeader_6e43a_55 p { font-size: 11px; } ._bottomReviewBar_6e43a_565 { padding: 11px; } ._readyState_6e43a_4645 { align-items: flex-start; } ._readyState_6e43a_4645 > div { align-items: flex-start; flex-direction: column; gap: 2px; } ._readyState_6e43a_4645 div span::before { display: none; } ._readyState_6e43a_4645 div span { white-space: normal; } }/* ========================================================= REVIEW CAMPAIGNS VIEW Uses global.css typography and design tokens ========================================================= */ /* ========================================================= PAGE ========================================================= */ ._page_irnxu_19 { width: 100%; min-width: 0; padding: 10px 0 var(--space-5); color: var(--ink); background: transparent; font-family: var(--font); font-size: var(--font-size-base); box-sizing: border-box; } /* ========================================================= PAGE HEADER ========================================================= */ ._pageHeader_irnxu_57 { width: 100%; min-width: 0; display: flex; align-items: flex-start; justify-content: space-between; gap: var(--space-5); margin-bottom: 14px; padding-top: 4px; } ._headerLeft_irnxu_85 { min-width: 0; flex: 1; } /* ========================================================= TITLE ========================================================= */ ._titleRow_irnxu_103 { display: flex; align-items: center; flex-wrap: wrap; gap: 10px; margin-bottom: 4px; } ._titleRow_irnxu_103 h1 { margin: 0; color: var(--ink); font-size: 24px; font-weight: var(--font-weight-bold); line-height: 1.2; letter-spacing: -0.45px; } /* ========================================================= STATUS ========================================================= */ ._statusBadge_irnxu_153 { min-height: 25px; display: inline-flex; align-items: center; justify-content: center; padding: 4px 9px; border-radius: var(--radius-sm); font-size: var(--font-size-xs); font-weight: var(--font-weight-semibold); white-space: nowrap; } ._statusActive_irnxu_187 { border: 1px solid rgba(16, 185, 129, 0.2); color: #078957; background: rgba(16, 185, 129, 0.08); } ._statusPaused_irnxu_201 { border: 1px solid rgba(245, 158, 11, 0.22); color: #c27803; background: rgba(245, 158, 11, 0.09); } ._pageHeader_irnxu_57 p { margin: 5px 0 0; color: var(--ink-soft); font-size: var(--font-size-sm); font-weight: var(--font-weight-normal); line-height: 1.5; } /* ========================================================= BREADCRUMB ========================================================= */ ._breadcrumb_irnxu_243 { display: flex; align-items: center; flex-wrap: wrap; gap: 8px; margin-bottom: 6px; color: var(--ink-soft); font-size: var(--font-size-xs); font-weight: var(--font-weight-medium); } ._breadcrumb_irnxu_243 button { padding: 0; border: 0; color: var(--ink-soft); background: transparent; font-family: inherit; font-size: inherit; cursor: pointer; } ._breadcrumb_irnxu_243 button:hover { color: var(--brand); } ._breadcrumb_irnxu_243 strong { color: var(--ink); font-weight: var(--font-weight-semibold); } /* ========================================================= HEADER META ========================================================= */ ._headerMeta_irnxu_329 { display: flex; align-items: center; flex-wrap: wrap; gap: 8px; margin-top: 5px; color: var(--ink-soft); font-size: var(--font-size-xs); font-weight: var(--font-weight-normal); line-height: 1.4; } ._headerMeta_irnxu_329 strong { color: var(--ink-soft); font-weight: var(--font-weight-medium); } ._headerMeta_irnxu_329 i { width: 4px; height: 4px; display: block; flex: 0 0 4px; border-radius: 50%; background: var(--ink-muted); } /* ========================================================= HEADER ACTIONS ========================================================= */ ._headerActions_irnxu_407 { flex-shrink: 0; display: flex; align-items: center; gap: 9px; padding-top: 23px; } ._headerActions_irnxu_407 .app-btn { min-height: 39px; display: inline-flex; align-items: center; justify-content: center; gap: 7px; padding: 7px 15px; border-radius: var(--radius-md); font-size: var(--font-size-sm); font-weight: var(--font-weight-semibold); white-space: nowrap; } ._headerActions_irnxu_407 .app-btn svg { width: 15px; height: 15px; flex: 0 0 15px; } /* ========================================================= SHARE BUTTON ========================================================= */ ._shareButton_irnxu_489 { min-height: 39px; display: inline-flex; align-items: center; justify-content: center; gap: 7px; padding: 7px 17px; border: 1px solid var(--color-danger); border-radius: var(--radius-md); color: var(--color-white); background: linear-gradient( 135deg, #ff5a50 0%, #ff3139 100% ); font-family: inherit; font-size: var(--font-size-sm); font-weight: var(--font-weight-semibold); cursor: pointer; box-shadow: 0 4px 10px rgba(255, 49, 57, 0.16); transition: transform var(--transition-fast), box-shadow var(--transition-fast), opacity var(--transition-fast); } ._shareButton_irnxu_489:hover { transform: translateY(-1px); box-shadow: 0 6px 14px rgba(255, 49, 57, 0.22); } ._shareButton_irnxu_489 svg { width: 15px; height: 15px; flex: 0 0 15px; } /* ========================================================= REVIEW LINK BAR ========================================================= */ ._reviewLinkBar_irnxu_595 { width: 100%; min-width: 0; min-height: 52px; display: flex; align-items: center; justify-content: center; gap: 10px; margin-bottom: 7px; padding: 8px 12px; border: 1px solid var(--border-light); border-radius: var(--radius-lg); background: var(--surface); box-shadow: var(--shadow-sm); box-sizing: border-box; } ._reviewLinkLabel_irnxu_643 { flex-shrink: 0; color: var(--ink-soft); font-size: var(--font-size-xs); font-weight: var(--font-weight-medium); } ._reviewLinkField_irnxu_661 { min-width: 0; height: 36px; display: flex; align-items: stretch; overflow: hidden; border: 1px solid var(--border-default); border-radius: var(--radius-md); background: var(--surface-muted); } ._reviewLinkField_irnxu_661 > span { min-width: 310px; display: flex; align-items: center; padding: 0 13px; overflow: hidden; color: var(--ink); font-size: var(--font-size-xs); font-weight: var(--font-weight-medium); text-overflow: ellipsis; white-space: nowrap; } ._reviewLinkField_irnxu_661 button { width: 38px; flex: 0 0 38px; display: inline-flex; align-items: center; justify-content: center; border: 0; border-left: 1px solid var(--border-light); color: var(--ink-soft); background: var(--surface); cursor: pointer; transition: color var(--transition-fast), background var(--transition-fast); } ._reviewLinkField_irnxu_661 button:hover { color: var(--brand); background: var(--surface-muted); } ._reviewLinkField_irnxu_661 button svg { width: 15px; height: 15px; } ._openLink_irnxu_795 { display: inline-flex; align-items: center; gap: 5px; padding: 5px 8px; color: var(--color-danger); font-size: var(--font-size-xs); font-weight: var(--font-weight-semibold); text-decoration: none; white-space: nowrap; } ._openLink_irnxu_795:hover { text-decoration: underline; } ._openLink_irnxu_795 svg { width: 13px; height: 13px; } /* ========================================================= TABS ========================================================= */ ._tabs_irnxu_857 { width: 100%; min-width: 0; display: flex; align-items: stretch; gap: 8px; margin-bottom: 10px; border-bottom: 1px solid var(--border-light); overflow-x: auto; overflow-y: hidden; scrollbar-width: none; } ._tabs_irnxu_857::-webkit-scrollbar { display: none; } ._tabs_irnxu_857 button { min-width: max-content; height: 42px; position: relative; display: inline-flex; align-items: center; justify-content: center; gap: 7px; padding: 0 16px; border: 0; color: var(--ink-soft); background: transparent; font-family: inherit; font-size: var(--font-size-sm); font-weight: var(--font-weight-medium); cursor: pointer; transition: color var(--transition-fast), background var(--transition-fast); } ._tabs_irnxu_857 button::after { content: ""; position: absolute; left: 0; right: 0; bottom: -1px; height: 2px; background: transparent; } ._tabs_irnxu_857 button:hover { color: var(--ink); background: rgba(15, 23, 42, 0.02); } ._tabs_irnxu_857 button span { min-width: 30px; height: 20px; display: inline-flex; align-items: center; justify-content: center; padding: 0 6px; border-radius: var(--radius-full); color: var(--ink); background: var(--surface-muted); font-size: 10px; font-weight: var(--font-weight-semibold); } ._tabs_irnxu_857 ._tabActive_irnxu_1041 { color: var(--ink); font-weight: var(--font-weight-semibold); } ._tabs_irnxu_857 ._tabActive_irnxu_1041::after { background: var(--color-danger); } /* ========================================================= STAT GRID ========================================================= */ ._statsGrid_irnxu_1069 { width: 100%; display: grid; grid-template-columns: repeat(6, minmax(0, 1fr)); gap: 10px; margin-bottom: 10px; } ._statCard_irnxu_1091 { min-width: 0; min-height: 84px; display: flex; align-items: center; gap: 11px; padding: 11px 12px; border: 1px solid var(--border-light); border-radius: var(--radius-lg); background: var(--surface); box-shadow: var(--shadow-sm); box-sizing: border-box; } ._statIcon_irnxu_1133 { width: 42px; height: 42px; flex: 0 0 42px; display: flex; align-items: center; justify-content: center; border: 1px solid transparent; border-radius: 50%; } ._statIcon_irnxu_1133 svg { width: 20px; height: 20px; } ._toneblue_irnxu_1171 { color: var(--brand); border-color: rgba(8, 102, 255, 0.14); background: rgba(8, 102, 255, 0.07); } ._tonegreen_irnxu_1187 { color: var(--ok); border-color: rgba(16, 185, 129, 0.14); background: rgba(16, 185, 129, 0.07); } ._tonepurple_irnxu_1203 { color: #7c3aed; border-color: rgba(124, 58, 237, 0.14); background: rgba(124, 58, 237, 0.07); } ._toneorange_irnxu_1219 { color: var(--warn); border-color: rgba(245, 158, 11, 0.15); background: rgba(245, 158, 11, 0.08); } ._statInfo_irnxu_1235 { min-width: 0; display: flex; flex-direction: column; gap: 3px; } ._statInfo_irnxu_1235 > span { overflow: hidden; color: var(--ink); font-size: var(--font-size-xs); font-weight: var(--font-weight-medium); line-height: 1.35; text-overflow: ellipsis; white-space: nowrap; } ._statValueRow_irnxu_1279 { min-width: 0; display: flex; align-items: baseline; flex-wrap: wrap; gap: 6px; } ._statValueRow_irnxu_1279 strong { color: var(--ink); font-size: 20px; font-weight: var(--font-weight-bold); line-height: 1.15; } ._statValueRow_irnxu_1279 em { color: var(--ok); font-style: normal; font-size: 11px; font-weight: var(--font-weight-semibold); } ._statInfo_irnxu_1235 > em { color: var(--ink-soft); font-size: 11px; font-style: normal; line-height: 1.35; } /* ========================================================= STAR RATING ========================================================= */ ._starRow_irnxu_1357 { display: flex; align-items: center; gap: 2px; } ._starRow_irnxu_1357 svg { width: 14px; height: 14px; } ._starActive_irnxu_1381 { color: var(--warn); fill: var(--warn); } ._starEmpty_irnxu_1393 { color: #aab3c1; } /* ========================================================= ANALYTICS GRID ========================================================= */ ._analyticsGrid_irnxu_1409 { width: 100%; min-width: 0; display: grid; grid-template-columns: minmax(0, 1.08fr) minmax(0, 1.12fr) minmax(0, 1fr); align-items: stretch; gap: 10px; margin-bottom: 10px; } /* IMPORTANT: Campaign Details must stay inside its natural analytics grid column. */ ._detailsPanel_irnxu_1455 { min-width: 0; grid-column: auto; align-self: stretch; } ._replyPanel_irnxu_1471 { min-width: 0; align-self: stretch; } ._detectionPanel_irnxu_1483 { min-width: 0; align-self: stretch; } /* ========================================================= COMMON PANEL ========================================================= */ ._panel_irnxu_1503 { min-width: 0; padding: 12px 13px; border: 1px solid var(--border-light); border-radius: var(--radius-lg); background: var(--surface); box-shadow: var(--shadow-sm); box-sizing: border-box; } ._panelHeader_irnxu_1533 { display: flex; align-items: center; justify-content: space-between; gap: 10px; margin-bottom: 10px; } ._panelHeader_irnxu_1533 h2, ._detectionTitle_irnxu_1555 h2 { margin: 0; color: var(--ink); font-size: var(--font-size-sm); font-weight: var(--font-weight-bold); line-height: 1.4; } ._rangeButton_irnxu_1575 { min-height: 29px; display: inline-flex; align-items: center; justify-content: center; gap: 5px; padding: 4px 9px; border: 1px solid var(--border-default); border-radius: var(--radius-sm); color: var(--ink-soft); background: var(--surface); font-family: inherit; font-size: var(--font-size-xs); font-weight: var(--font-weight-medium); cursor: pointer; } ._rangeButton_irnxu_1575 svg { width: 12px; height: 12px; } ._panelNote_irnxu_1633 { margin: 8px 0 0; color: var(--ink-soft); font-size: var(--font-size-xs); font-weight: var(--font-weight-normal); line-height: 1.4; } /* ========================================================= RESPONSE FUNNEL ========================================================= */ ._funnel_irnxu_1661 { min-height: 125px; display: flex; align-items: center; justify-content: center; gap: 6px; padding: 6px 0; } ._funnelBox_irnxu_1685 { min-width: 78px; min-height: 72px; display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 4px; padding: 8px; border: 1px solid; border-radius: var(--radius-md); background: var(--surface); text-align: center; } ._funnelBox_irnxu_1685 span { color: var(--ink); font-size: 11px; font-weight: var(--font-weight-medium); } ._funnelBox_irnxu_1685 strong { color: var(--ink); font-size: var(--font-size-lg); font-weight: var(--font-weight-bold); } ._funnelBlue_irnxu_1755 { border-color: #4f8cff; background: #f5f8ff; } ._funnelGreen_irnxu_1767 { border-color: #36b56e; background: #f5fff9; } ._funnelPurple_irnxu_1779 { border-color: #9a61f6; background: #fbf8ff; } ._funnelConnector_irnxu_1791 { display: flex; flex-direction: column; align-items: center; gap: 3px; color: var(--ink-soft); } ._funnelConnector_irnxu_1791 strong { color: var(--ink); font-size: 11px; font-weight: var(--font-weight-semibold); } ._funnelConnector_irnxu_1791 span { font-size: 18px; } ._funnelSplit_irnxu_1833 { min-width: 42px; display: flex; flex-direction: column; gap: 18px; } ._funnelSplit_irnxu_1833 > div { display: flex; align-items: center; justify-content: space-between; gap: 3px; color: var(--ink-soft); font-size: 11px; } ._funnelResults_irnxu_1875 { display: flex; flex-direction: column; gap: 8px; } ._funnelResults_irnxu_1875 > div { min-width: 95px; min-height: 48px; display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 2px; padding: 6px 8px; border: 1px solid; border-radius: var(--radius-md); text-align: center; } ._funnelResults_irnxu_1875 span { font-size: 11px; font-weight: var(--font-weight-medium); } ._funnelResults_irnxu_1875 strong { color: var(--ink); font-size: var(--font-size-md); } ._publicResult_irnxu_1949 { border-color: #40b96d !important; background: #f4fff8; } ._privateResult_irnxu_1961 { border-color: var(--warn) !important; background: #fffbf3; } /* ========================================================= REVIEW ACTIVITY CHART ========================================================= */ ._chartWrap_irnxu_1981 { min-height: 142px; display: flex; gap: 8px; } ._chartYAxis_irnxu_1997 { width: 30px; flex: 0 0 30px; display: flex; flex-direction: column; justify-content: space-between; padding: 2px 0 18px; color: var(--ink-soft); font-size: 11px; } ._lineChart_irnxu_2029 { min-width: 0; flex: 1; display: flex; flex-direction: column; } ._lineChart_irnxu_2029 svg { width: 100%; height: 116px; overflow: visible; } ._gridLines_irnxu_2059 line { stroke: #edf0f4; stroke-width: 1; } ._publicLine_irnxu_2069 { fill: none; stroke: #ff463d; stroke-width: 3; } ._privateLine_irnxu_2083 { fill: none; stroke: #7c3aed; stroke-width: 3; } ._publicPoint_irnxu_2097 { fill: #ff463d; } ._privatePoint_irnxu_2105 { fill: #7c3aed; } ._chartLabels_irnxu_2113 { display: flex; justify-content: space-between; gap: 3px; color: var(--ink-soft); font-size: 10px; } ._chartLegend_irnxu_2135 { display: flex; align-items: center; flex-wrap: wrap; gap: 20px; margin-top: 8px; color: var(--ink-soft); font-size: var(--font-size-xs); } ._chartLegend_irnxu_2135 span { display: inline-flex; align-items: center; gap: 6px; } ._chartLegend_irnxu_2135 i { width: 7px; height: 7px; flex: 0 0 7px; border-radius: 50%; } ._chartLegend_irnxu_2135 strong { margin-left: 2px; color: var(--ink); font-size: var(--font-size-xs); font-weight: var(--font-weight-semibold); } ._publicLegend_irnxu_2213 { background: #ff463d; } ._privateLegend_irnxu_2221 { background: #7c3aed; } /* ========================================================= SENTIMENT ========================================================= */ ._sentimentBody_irnxu_2237 { min-height: 160px; display: flex; align-items: center; justify-content: center; gap: 28px; } ._donutChart_irnxu_2257 { width: 132px; height: 132px; flex: 0 0 132px; display: flex; align-items: center; justify-content: center; border-radius: 50%; background: conic-gradient( var(--ok) 0deg 205deg, var(--warn) 205deg 299deg, var(--color-danger) 299deg 360deg ); } ._donutInner_irnxu_2295 { width: 78px; height: 78px; display: flex; flex-direction: column; align-items: center; justify-content: center; border-radius: 50%; background: var(--surface); } ._donutInner_irnxu_2295 strong { color: var(--ink); font-size: var(--font-size-xl); font-weight: var(--font-weight-bold); } ._donutInner_irnxu_2295 span { margin-top: 2px; color: var(--ink-soft); font-size: 11px; } ._sentimentLegend_irnxu_2353 { display: flex; flex-direction: column; gap: 14px; } ._sentimentLegend_irnxu_2353 > div { display: flex; align-items: flex-start; gap: 8px; } ._sentimentLegend_irnxu_2353 i { width: 9px; height: 9px; flex: 0 0 9px; margin-top: 4px; border-radius: 50%; } ._sentimentLegend_irnxu_2353 span { display: flex; flex-direction: column; color: var(--ink); font-size: var(--font-size-xs); font-weight: var(--font-weight-medium); } ._sentimentLegend_irnxu_2353 strong { margin-top: 2px; color: var(--ink-soft); font-size: 11px; font-weight: var(--font-weight-medium); } ._sentimentPositive_irnxu_2441 { background: var(--ok); } ._sentimentNeutral_irnxu_2449 { background: var(--warn); } ._sentimentNegative_irnxu_2457 { background: var(--color-danger); } /* ========================================================= AUTOMATIC PRIVATE FEEDBACK DETECTION ========================================================= */ ._detectionPanel_irnxu_1483 { min-height: 220px; } ._detectionTitleRow_irnxu_2481 { display: flex; align-items: flex-start; justify-content: space-between; gap: 10px; margin-bottom: 9px; } ._detectionTitle_irnxu_1555 { min-width: 0; display: flex; align-items: flex-start; gap: 9px; } ._aiIcon_irnxu_2519 { width: 36px; height: 36px; flex: 0 0 36px; display: flex; align-items: center; justify-content: center; border: 2px solid #8b5cf6; border-radius: var(--radius-md); color: #8b5cf6; background: #faf7ff; } ._aiIcon_irnxu_2519 svg { width: 18px; height: 18px; } ._detectionTitle_irnxu_1555 p { margin: 3px 0 0; color: var(--ink-soft); font-size: var(--font-size-xs); line-height: 1.4; } ._activeMiniBadge_irnxu_2583, ._aiEnabled_irnxu_2585 { min-height: 23px; display: inline-flex; align-items: center; justify-content: center; padding: 3px 8px; border: 1px solid rgba(16, 185, 129, 0.18); border-radius: var(--radius-sm); color: #078957; background: rgba(16, 185, 129, 0.07); font-size: 11px; font-weight: var(--font-weight-semibold); white-space: nowrap; } /* ========================================================= ROUTING RULES ========================================================= */ ._routingRules_irnxu_2637 { padding: 6px 9px; border: 1px solid var(--border-light); border-radius: var(--radius-md); background: var(--surface-muted); } ._routingRules_irnxu_2637 > div { min-height: 31px; display: grid; grid-template-columns: 22px minmax(0, 1fr) 32px 110px; align-items: center; gap: 7px; } ._routingRules_irnxu_2637 > div + div { border-top: 1px solid var(--border-light); } ._routingRules_irnxu_2637 p { margin: 0; color: var(--ink-soft); font-size: var(--font-size-xs); line-height: 1.35; } ._routingRules_irnxu_2637 > div > strong { color: var(--ink-soft); font-size: var(--font-size-sm); text-align: center; } ._routingRules_irnxu_2637 em { font-size: var(--font-size-xs); font-style: normal; font-weight: var(--font-weight-medium); } ._happyIcon_irnxu_2737 { color: var(--ok); font-size: var(--font-size-lg); } ._sadIcon_irnxu_2749 { color: #ff7139; font-size: var(--font-size-lg); } ._alertIcon_irnxu_2761 { display: flex; align-items: center; color: var(--color-danger); } ._alertIcon_irnxu_2761 svg { width: 15px; height: 15px; } ._routePublic_irnxu_2785 { color: var(--ok); } ._routePrivate_irnxu_2793 { color: #ff6d34; } ._routeHuman_irnxu_2801 { color: var(--color-danger); } /* ========================================================= DETECTION STATS ========================================================= */ ._detectionStats_irnxu_2817 { display: grid; grid-template-columns: repeat(3, 1fr); margin-top: 9px; border-top: 1px solid var(--border-light); border-bottom: 1px solid var(--border-light); } ._detectionStats_irnxu_2817 > div { min-width: 0; display: flex; flex-direction: column; align-items: center; gap: 2px; padding: 7px 5px; } ._detectionStats_irnxu_2817 > div + div { border-left: 1px solid var(--border-light); } ._detectionStats_irnxu_2817 strong { color: var(--ink); font-size: var(--font-size-md); font-weight: var(--font-weight-bold); } ._detectionStats_irnxu_2817 span { color: var(--ink-soft); font-size: 11px; line-height: 1.35; text-align: center; } ._detectionActions_irnxu_2899 { display: flex; gap: 8px; margin-top: 9px; } ._detectionActions_irnxu_2899 button { min-width: 112px; min-height: 31px; padding: 5px 11px; border: 1px solid var(--border-default); border-radius: var(--radius-sm); color: var(--ink); background: var(--surface); font-family: inherit; font-size: var(--font-size-xs); font-weight: var(--font-weight-medium); cursor: pointer; transition: border-color var(--transition-fast), background var(--transition-fast); } ._detectionActions_irnxu_2899 button:hover { border-color: var(--brand); background: var(--brand-soft); } /* ========================================================= REPLY MANAGEMENT ========================================================= */ ._panelTitleIcon_irnxu_2981 { display: flex; align-items: center; gap: 7px; } ._panelTitleIcon_irnxu_2981 > svg { width: 16px; height: 16px; color: var(--ink-soft); } ._replyStats_irnxu_3009 { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); border: 1px solid var(--border-light); border-radius: var(--radius-md); overflow: hidden; } ._replyStats_irnxu_3009 > div { min-width: 0; display: flex; flex-direction: column; align-items: center; gap: 3px; padding: 9px 5px; text-align: center; } ._replyStats_irnxu_3009 > div + div { border-left: 1px solid var(--border-light); } ._replyStats_irnxu_3009 strong { font-size: var(--font-size-lg); font-weight: var(--font-weight-bold); } ._replyStats_irnxu_3009 span { color: var(--ink-soft); font-size: 11px; line-height: 1.3; } ._replyGreen_irnxu_3089 { color: var(--ok); } ._replyBlueText_irnxu_3097 { color: var(--brand); } ._replyPurpleText_irnxu_3105 { color: #7c3aed; } ._replyOrangeText_irnxu_3113 { color: var(--warn); } ._progressInfo_irnxu_3121 { display: flex; align-items: center; justify-content: space-between; margin-top: 11px; color: var(--ink-soft); font-size: var(--font-size-xs); } ._progressInfo_irnxu_3121 strong { color: var(--ink); font-weight: var(--font-weight-semibold); } ._progressTrack_irnxu_3157 { width: 100%; height: 7px; margin-top: 5px; overflow: hidden; border-radius: var(--radius-full); background: #e8edf2; } ._progressTrack_irnxu_3157 span { height: 100%; display: block; border-radius: inherit; background: var(--ok); } ._replyActions_irnxu_3203 { display: grid; grid-template-columns: 1fr 1fr; gap: 8px; margin-top: 11px; } ._replyActions_irnxu_3203 button { min-height: 34px; display: inline-flex; align-items: center; justify-content: center; gap: 6px; padding: 5px 10px; border: 1px solid var(--border-default); border-radius: var(--radius-sm); color: var(--ink); background: var(--surface); font-family: inherit; font-size: var(--font-size-xs); font-weight: var(--font-weight-medium); cursor: pointer; } ._replyActions_irnxu_3203 button svg { width: 14px; height: 14px; } ._replyActions_irnxu_3203 ._reviewAiButton_irnxu_3279 { border-color: rgba(255, 49, 57, 0.35); color: var(--color-danger); background: #fffafa; } ._replyWarning_irnxu_3295 { min-height: 34px; display: flex; align-items: center; gap: 7px; margin-top: 9px; padding: 7px 9px; border: 1px solid rgba(255, 104, 70, 0.14); border-radius: var(--radius-sm); color: #a95a43; background: #fff5f1; font-size: var(--font-size-xs); line-height: 1.4; } ._replyWarning_irnxu_3295 svg { width: 14px; height: 14px; flex: 0 0 14px; color: var(--color-danger); } /* ========================================================= CAMPAIGN DETAILS ========================================================= */ ._editTextButton_irnxu_3365 { padding: 0; border: 0; color: var(--color-danger); background: transparent; font-family: inherit; font-size: var(--font-size-xs); font-weight: var(--font-weight-semibold); cursor: pointer; } ._editTextButton_irnxu_3365:hover { text-decoration: underline; } ._detailsRows_irnxu_3403 { display: flex; flex-direction: column; gap: 10px; } ._detailsRows_irnxu_3403 > div { min-width: 0; display: grid; grid-template-columns: minmax(105px, 0.8fr) minmax(0, 1.35fr); align-items: center; gap: 9px; } ._detailsRows_irnxu_3403 > div > span { min-width: 0; display: inline-flex; align-items: center; gap: 7px; color: var(--ink-soft); font-size: var(--font-size-xs); line-height: 1.4; white-space: nowrap; } ._detailsRows_irnxu_3403 > div > span svg { width: 14px; height: 14px; flex: 0 0 14px; } ._detailsRows_irnxu_3403 strong { min-width: 0; color: var(--ink); font-size: var(--font-size-xs); font-weight: var(--font-weight-medium); line-height: 1.4; } ._channelList_irnxu_3509 { min-width: 0; display: flex; align-items: center; flex-wrap: wrap; gap: 8px; } ._channelList_irnxu_3509 > span { display: inline-flex; align-items: center; gap: 4px; color: var(--ink); font-size: 11px; font-weight: var(--font-weight-medium); white-space: nowrap; } ._channelList_irnxu_3509 svg { width: 14px; height: 14px; flex: 0 0 14px; } ._googleIcon_irnxu_3571 { color: #4285f4; } ._facebookIcon_irnxu_3579 { color: #1877f2; } ._reviewerValue_irnxu_3587 { min-width: 0; display: flex; align-items: center; gap: 7px; } ._reviewerValue_irnxu_3587 i { width: 22px; height: 22px; flex: 0 0 22px; display: inline-flex; align-items: center; justify-content: center; border-radius: 50%; color: var(--color-white); background: #7c3aed; font-size: 10px; font-style: normal; font-weight: var(--font-weight-semibold); } /* ========================================================= RECENT RESPONSES PANEL ========================================================= */ ._responsesPanel_irnxu_3653 { width: 100%; min-width: 0; padding: 11px 12px 9px; border: 1px solid var(--border-light); border-radius: var(--radius-lg); background: var(--surface); box-shadow: var(--shadow-sm); box-sizing: border-box; } ._responsesHeader_irnxu_3685 > h2 { margin: 0 0 7px; color: var(--ink); font-size: var(--font-size-sm); font-weight: var(--font-weight-bold); line-height: 1.4; } /* ========================================================= PRIORITY ALERT ========================================================= */ ._priorityAlert_irnxu_3713 { min-height: 32px; display: flex; align-items: center; justify-content: space-between; gap: 12px; padding: 5px 9px; border: 1px solid rgba(255, 99, 71, 0.14); border-radius: var(--radius-sm); background: #fff5f1; } ._priorityAlert_irnxu_3713 > div { display: flex; align-items: center; gap: 7px; color: #8a5c50; font-size: var(--font-size-xs); line-height: 1.4; } ._priorityAlert_irnxu_3713 svg { width: 14px; height: 14px; flex: 0 0 14px; color: var(--color-danger); } ._priorityAlert_irnxu_3713 button { min-height: 25px; padding: 4px 13px; border: 0; border-radius: var(--radius-sm); color: var(--color-white); background: var(--color-danger); font-family: inherit; font-size: 11px; font-weight: var(--font-weight-semibold); cursor: pointer; } /* ========================================================= RESPONSE FILTERS ========================================================= */ ._responseFilters_irnxu_3833 { display: flex; align-items: center; flex-wrap: wrap; gap: 7px; margin: 8px 0; } ._responseFilters_irnxu_3833 select { min-width: 150px; height: 34px; padding: 0 30px 0 10px; border: 1px solid var(--border-default); border-radius: var(--radius-sm); color: var(--ink); background: var(--surface); font-family: inherit; font-size: var(--font-size-xs); outline: none; transition: border-color var(--transition-fast), box-shadow var(--transition-fast); } ._responseSearch_irnxu_3897 { width: 240px; height: 34px; position: relative; display: flex; align-items: center; } ._responseSearch_irnxu_3897 svg { width: 14px; height: 14px; position: absolute; left: 10px; color: var(--ink-muted); pointer-events: none; } ._responseSearch_irnxu_3897 input { width: 100%; height: 100%; padding: 0 10px 0 31px; border: 1px solid var(--border-default); border-radius: var(--radius-sm); color: var(--ink); background: var(--surface); font-family: inherit; font-size: var(--font-size-xs); outline: none; transition: border-color var(--transition-fast), box-shadow var(--transition-fast); } ._responseSearch_irnxu_3897 input::placeholder { color: var(--ink-muted); } ._responseSearch_irnxu_3897 input:focus, ._responseFilters_irnxu_3833 select:focus { border-color: var(--brand); box-shadow: 0 0 0 2px rgba(8, 102, 255, 0.07); } /* ========================================================= TABLE WRAPPER ========================================================= */ ._tableWrap_irnxu_4015 { width: 100%; overflow-x: auto; border: 1px solid var(--border-light); border-radius: var(--radius-md); } /* ========================================================= RESPONSE TABLE ========================================================= */ ._responseTable_irnxu_4041 { width: 100%; min-width: 1080px; border-collapse: collapse; background: var(--surface); } ._responseTable_irnxu_4041 th { padding: 7px 9px; border-bottom: 1px solid var(--border-light); color: var(--ink-soft); background: #fbfcfe; font-size: 11px; font-weight: var(--font-weight-semibold); line-height: 1.35; text-align: left; white-space: nowrap; } ._responseTable_irnxu_4041 td { padding: 6px 9px; border-bottom: 1px solid #edf0f3; color: var(--ink); font-size: var(--font-size-xs); line-height: 1.4; vertical-align: middle; } ._responseTable_irnxu_4041 tbody tr:last-child td { border-bottom: 0; } ._responseTable_irnxu_4041 tbody tr { transition: background var(--transition-fast); } ._responseTable_irnxu_4041 tbody tr:hover { background: #fbfcff; } /* ========================================================= CUSTOMER CELL ========================================================= */ ._customerCell_irnxu_4149 { min-width: 135px; display: flex; align-items: center; gap: 8px; } ._customerAvatar_irnxu_4167 { width: 25px; height: 25px; flex: 0 0 25px; display: inline-flex; align-items: center; justify-content: center; border-radius: 50%; color: #7c3aed; background: #f0e9ff; font-size: 9px; font-weight: var(--font-weight-semibold); } ._customerCell_irnxu_4149 strong { color: var(--ink); font-size: var(--font-size-xs); font-weight: var(--font-weight-medium); } ._responseText_irnxu_4219 { display: block; max-width: 320px; overflow: hidden; color: var(--ink-soft); font-size: var(--font-size-xs); text-overflow: ellipsis; white-space: nowrap; } ._responseTable_irnxu_4041 ._starRow_irnxu_1357 svg { width: 13px; height: 13px; } /* ========================================================= MINI BADGES ========================================================= */ ._miniBadge_irnxu_4267 { min-height: 21px; display: inline-flex; align-items: center; justify-content: center; padding: 3px 7px; border-radius: var(--radius-sm); font-size: 10px; font-weight: var(--font-weight-medium); white-space: nowrap; } ._publicBadge_irnxu_4301 { color: #078957; background: #e8f7ee; } ._privateBadge_irnxu_4313 { color: #d87500; background: #fff2df; } ._positiveBadge_irnxu_4325 { color: #078957; background: #e8f7ee; } ._negativeBadge_irnxu_4337 { color: #e0443e; background: #ffe9e7; } ._neutralBadge_irnxu_4349 { color: #b97400; background: #fff2dc; } ._replyBlue_irnxu_3097 { color: var(--brand); background: #e8f0ff; } ._replyRed_irnxu_4373 { color: #e0443e; background: #ffe9e7; } ._replyPurple_irnxu_3105 { color: #7c3aed; background: #f0e9ff; } ._replyNeutral_irnxu_4397 { color: var(--ink-soft); background: var(--surface-muted); } /* ========================================================= RECEIVED ========================================================= */ ._receivedText_irnxu_4417 { color: var(--ink-soft); font-size: 11px; white-space: nowrap; } /* ========================================================= TABLE ACTION ========================================================= */ ._tableActionButton_irnxu_4441 { min-width: 68px; min-height: 26px; padding: 4px 10px; border: 1px solid rgba(255, 49, 57, 0.48); border-radius: var(--radius-sm); color: var(--color-danger); background: var(--surface); font-family: inherit; font-size: 11px; font-weight: var(--font-weight-medium); cursor: pointer; transition: color var(--transition-fast), background var(--transition-fast); } ._tableActionButton_irnxu_4441:hover { color: var(--color-white); background: var(--color-danger); } ._moreButton_irnxu_4499 { width: 27px; height: 27px; display: inline-flex; align-items: center; justify-content: center; padding: 0; border: 0; border-radius: var(--radius-sm); color: var(--ink-soft); background: transparent; cursor: pointer; transition: color var(--transition-fast), background var(--transition-fast); } ._moreButton_irnxu_4499:hover { color: var(--ink); background: var(--surface-muted); } ._moreButton_irnxu_4499 svg { width: 15px; height: 15px; } /* ========================================================= VIEW ALL RESPONSES ========================================================= */ ._viewAllResponses_irnxu_4575 { width: 100%; display: flex; align-items: center; justify-content: center; gap: 5px; margin-top: 7px; padding: 5px; border: 0; color: var(--color-danger); background: transparent; font-family: inherit; font-size: var(--font-size-xs); font-weight: var(--font-weight-medium); cursor: pointer; } ._viewAllResponses_irnxu_4575:hover { text-decoration: underline; } ._viewAllResponses_irnxu_4575 svg { width: 13px; height: 13px; } /* ========================================================= DISABLED BUTTON ========================================================= */ ._page_irnxu_19 button:disabled { cursor: not-allowed; opacity: 0.6; } /* ========================================================= DARK MODE ========================================================= */ [data-theme="dark"] ._page_irnxu_19, .dark ._page_irnxu_19 { color: var(--ink); } [data-theme="dark"] ._statCard_irnxu_1091, [data-theme="dark"] ._panel_irnxu_1503, [data-theme="dark"] ._responsesPanel_irnxu_3653, [data-theme="dark"] ._reviewLinkBar_irnxu_595, .dark ._statCard_irnxu_1091, .dark ._panel_irnxu_1503, .dark ._responsesPanel_irnxu_3653, .dark ._reviewLinkBar_irnxu_595 { border-color: var(--border-light); background: var(--surface); } [data-theme="dark"] ._reviewLinkField_irnxu_661, .dark ._reviewLinkField_irnxu_661 { border-color: var(--border-default); background: var(--surface-muted); } [data-theme="dark"] ._reviewLinkField_irnxu_661 button, .dark ._reviewLinkField_irnxu_661 button { border-color: var(--border-light); color: var(--ink-soft); background: var(--surface); } [data-theme="dark"] ._responseFilters_irnxu_3833 select, [data-theme="dark"] ._responseSearch_irnxu_3897 input, .dark ._responseFilters_irnxu_3833 select, .dark ._responseSearch_irnxu_3897 input { border-color: var(--border-default); color: var(--ink); background: var(--surface); } [data-theme="dark"] ._responseTable_irnxu_4041, .dark ._responseTable_irnxu_4041 { background: var(--surface); } [data-theme="dark"] ._responseTable_irnxu_4041 th, .dark ._responseTable_irnxu_4041 th { color: var(--ink-soft); background: var(--surface-muted); } /* ========================================================= RESPONSIVE - LARGE DESKTOP ========================================================= */ @media (min-width: 1600px) { ._statsGrid_irnxu_1069 { gap: 11px; } ._analyticsGrid_irnxu_1409 { gap: 11px; } ._panel_irnxu_1503 { padding: 13px 14px; } } /* ========================================================= RESPONSIVE - LARGE LAPTOP IMPORTANT: Keep Campaign Details beside Reply Management ========================================================= */ @media (max-width: 1450px) { ._titleRow_irnxu_103 h1 { font-size: 20px; } /* Summary becomes 3 columns */ ._statsGrid_irnxu_1069 { grid-template-columns: repeat(3, minmax(0, 1fr)); } /* 2-column structure: Funnel | Activity Sentiment | Detection Reply | Campaign Details This fixes the blank space beside Reply Management. */ ._analyticsGrid_irnxu_1409 { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 10px; } /* DO NOT use grid-column: 1 / -1 here. Campaign Details stays beside Reply Management. */ ._detailsPanel_irnxu_1455 { grid-column: auto; min-width: 0; } ._replyPanel_irnxu_1471 { min-width: 0; } ._detectionPanel_irnxu_1483 { min-width: 0; } /* Campaign Details should remain vertical inside its half-width card. */ ._detailsRows_irnxu_3403 { display: flex; flex-direction: column; gap: 10px; } ._detailsRows_irnxu_3403 > div { grid-template-columns: 125px minmax(0, 1fr); gap: 9px; } ._funnel_irnxu_1661 { justify-content: flex-start; overflow-x: auto; } } /* ========================================================= RESPONSIVE - MEDIUM LAPTOP ========================================================= */ @media (max-width: 1150px) { ._pageHeader_irnxu_57 { flex-direction: column; gap: 12px; } ._headerActions_irnxu_407 { width: 100%; justify-content: flex-end; padding-top: 0; } ._reviewLinkBar_irnxu_595 { justify-content: flex-start; flex-wrap: wrap; } /* Keep 2 columns here too. Reply Management | Campaign Details still remains side-by-side. */ ._analyticsGrid_irnxu_1409 { grid-template-columns: repeat(2, minmax(0, 1fr)); } ._detailsPanel_irnxu_1455 { grid-column: auto; } ._detailsRows_irnxu_3403 { display: flex; flex-direction: column; gap: 9px; } ._detailsRows_irnxu_3403 > div { grid-template-columns: 110px minmax(0, 1fr); gap: 8px; } ._channelList_irnxu_3509 { gap: 6px; } ._sentimentBody_irnxu_2237 { min-height: 180px; } } /* ========================================================= RESPONSIVE - TABLET ========================================================= */ @media (max-width: 850px) { ._titleRow_irnxu_103 h1 { font-size: 24px; } ._headerActions_irnxu_407 { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 8px; } ._headerActions_irnxu_407 .app-btn, ._shareButton_irnxu_489 { width: 100%; } ._shareButton_irnxu_489 { grid-column: 1 / -1; } ._reviewLinkBar_irnxu_595 { align-items: flex-start; } ._reviewLinkField_irnxu_661 { width: 100%; } ._reviewLinkField_irnxu_661 > span { min-width: 0; flex: 1; } ._statsGrid_irnxu_1069 { grid-template-columns: repeat(2, minmax(0, 1fr)); } /* Only tablet/mobile becomes single column. */ ._analyticsGrid_irnxu_1409 { grid-template-columns: 1fr; } ._detailsPanel_irnxu_1455 { grid-column: auto; } ._detailsRows_irnxu_3403 { display: flex; flex-direction: column; gap: 10px; } ._detailsRows_irnxu_3403 > div { grid-template-columns: 130px minmax(0, 1fr); } ._sentimentBody_irnxu_2237 { flex-direction: column; gap: 18px; } ._sentimentLegend_irnxu_2353 { width: 100%; flex-direction: row; justify-content: center; flex-wrap: wrap; gap: 15px; } ._responseSearch_irnxu_3897 { width: 100%; } ._responseFilters_irnxu_3833 select { flex: 1; min-width: 150px; } } /* ========================================================= RESPONSIVE - MOBILE ========================================================= */ @media (max-width: 600px) { ._pageHeader_irnxu_57 { margin-bottom: 14px; } ._titleRow_irnxu_103 { align-items: flex-start; flex-direction: column; gap: 7px; } ._titleRow_irnxu_103 h1 { font-size: 22px; } ._pageHeader_irnxu_57 p { font-size: var(--font-size-xs); } ._headerActions_irnxu_407 { grid-template-columns: 1fr; } ._shareButton_irnxu_489 { grid-column: auto; } ._statsGrid_irnxu_1069 { grid-template-columns: 1fr; } ._statCard_irnxu_1091 { min-height: 78px; } ._tabs_irnxu_857 button { height: 40px; padding: 0 12px; font-size: var(--font-size-xs); } ._detailsRows_irnxu_3403 > div { grid-template-columns: 115px minmax(0, 1fr); } ._replyStats_irnxu_3009 { grid-template-columns: repeat(2, minmax(0, 1fr)); } ._replyStats_irnxu_3009 > div:nth-child(3) { border-top: 1px solid var(--border-light); border-left: 0; } ._replyStats_irnxu_3009 > div:nth-child(4) { border-top: 1px solid var(--border-light); } ._replyActions_irnxu_3203 { grid-template-columns: 1fr; } ._routingRules_irnxu_2637 > div { grid-template-columns: 22px minmax(0, 1fr) 26px 100px; } ._detectionStats_irnxu_2817 { grid-template-columns: 1fr; } ._detectionStats_irnxu_2817 > div + div { border-top: 1px solid var(--border-light); border-left: 0; } ._detectionActions_irnxu_2899 { display: grid; grid-template-columns: 1fr; } ._detectionActions_irnxu_2899 button { width: 100%; } ._priorityAlert_irnxu_3713 { align-items: flex-start; flex-direction: column; } ._priorityAlert_irnxu_3713 button { width: 100%; } ._responseFilters_irnxu_3833 { display: grid; grid-template-columns: 1fr; } ._responseFilters_irnxu_3833 select, ._responseSearch_irnxu_3897 { width: 100%; } } /* ========================================================= RESPONSIVE - SMALL MOBILE ========================================================= */ @media (max-width: 420px) { ._titleRow_irnxu_103 h1 { font-size: var(--font-size-2xl); } ._breadcrumb_irnxu_243 { font-size: var(--font-size-xs); } ._reviewLinkLabel_irnxu_643 { width: 100%; } ._reviewLinkField_irnxu_661 { height: 35px; } ._openLink_irnxu_795 { padding-left: 0; } ._statValueRow_irnxu_1279 strong { font-size: var(--font-size-xl); } ._panel_irnxu_1503 { padding: 10px; } ._panelHeader_irnxu_1533 { align-items: flex-start; } ._funnel_irnxu_1661 { padding-bottom: 8px; } ._donutChart_irnxu_2257 { width: 120px; height: 120px; flex-basis: 120px; } ._donutInner_irnxu_2295 { width: 72px; height: 72px; } ._routingRules_irnxu_2637 { padding: 5px; overflow-x: auto; } ._routingRules_irnxu_2637 > div { min-width: 360px; grid-template-columns: 20px minmax(110px, 1fr) 24px 95px; } ._detailsRows_irnxu_3403 > div { grid-template-columns: 1fr; gap: 3px; } ._detailsRows_irnxu_3403 > div > span { white-space: normal; } ._responsesPanel_irnxu_3653 { padding: 10px 9px 8px; } }/* ====================================================== VIDEO TO DOCUMENT AI ====================================================== */ ._historyHeader_1rx7y_9 { padding: 18px 18px 0; } ._historyTitle_1rx7y_17 { margin: 0; color: var(--text-primary-dark); font-size: var(--font-size-xl); font-weight: var(--font-weight-bold); } ._historyDescription_1rx7y_31 { margin: 4px 0 0; color: var(--text-secondary); font-size: var(--font-size-sm); } /* ====================================================== STAT ICONS ====================================================== */ ._statIcon_1rx7y_51 { width: 48px; height: 48px; min-width: 48px; border-radius: 50%; display: inline-flex; align-items: center; justify-content: center; font-size: 22px; } ._statCompleted_1rx7y_73 { color: #16a34a; background: #f0fdf4; border: 1px solid #dcfce7; } ._statProcessing_1rx7y_85 { color: #ea580c; background: #fff7ed; border: 1px solid #fed7aa; } ._statFailed_1rx7y_97 { color: #ef4444; background: #fff1f2; border: 1px solid #fecdd3; } ._statDraft_1rx7y_109 { color: #334155; background: #f1f5f9; border: 1px solid #e2e8f0; } /* ====================================================== VIDEO CELL ====================================================== */ ._videoCell_1rx7y_129 { min-width: 270px; display: flex; align-items: center; gap: 12px; } ._videoThumb_1rx7y_143 { position: relative; width: 110px; height: 64px; min-width: 110px; overflow: hidden; border-radius: 8px; background: radial-gradient( circle at 70% 25%, rgba(255, 255, 255, 0.35), transparent 24% ), linear-gradient(145deg, #27364f, #0f172a); } ._videoThumb_1rx7y_143::before { content: ""; position: absolute; left: 16px; bottom: 0; width: 34px; height: 52px; border-radius: 18px 18px 5px 5px; background: rgba(255, 255, 255, 0.82); } ._training_1rx7y_197 { background: linear-gradient(145deg, #f0f9ff, #93c5fd); } ._sales_1rx7y_205 { background: linear-gradient(145deg, #dbeafe, #64748b); } ._onboarding_1rx7y_213 { background: linear-gradient(145deg, #ecfdf5, #60a5fa); } ._finance_1rx7y_221 { background: linear-gradient(145deg, #e2e8f0, #334155); } ._team_1rx7y_229 { background: linear-gradient(145deg, #e0f2fe, #1e293b); } ._videoDuration_1rx7y_237 { position: absolute; right: 6px; bottom: 5px; padding: 2px 5px; border-radius: 4px; background: rgba(15, 23, 42, 0.88); color: #ffffff; font-size: 10px; font-weight: 600; } ._videoMeta_1rx7y_261 { min-width: 0; display: flex; flex-direction: column; gap: 4px; } ._videoMeta_1rx7y_261 strong { color: #0f172a; font-size: 13px; font-weight: 600; white-space: nowrap; } ._videoMeta_1rx7y_261 span { color: #64748b; font-size: 12px; } ._videoMeta_1rx7y_261 b { padding: 0 3px; color: #94a3b8; font-weight: 400; } /* ====================================================== FORMAT CHIPS ====================================================== */ ._formatGroup_1rx7y_319 { display: flex; align-items: center; flex-wrap: wrap; gap: 7px; } ._formatChip_1rx7y_333 { min-height: 30px; padding: 0 9px; border: 1px solid #dbe2ea; border-radius: 6px; background: #ffffff; color: #1e293b; display: inline-flex; align-items: center; gap: 6px; font-size: 12px; font-weight: 500; } ._formatChip_1rx7y_333 svg { font-size: 15px; } ._pdf_1rx7y_369 svg { color: #dc2626; } ._docx_1rx7y_377 svg { color: #2563eb; } ._xlsx_1rx7y_385 svg { color: #15803d; } /* ====================================================== STATUS ====================================================== */ ._statusCell_1rx7y_401 { min-width: 135px; } ._statusBadge_1rx7y_409 { min-height: 28px; padding: 0 9px; border-radius: 6px; display: inline-flex; align-items: center; gap: 6px; font-size: 12px; font-weight: 500; } ._statusBadge_1rx7y_409 svg { font-size: 15px; } ._completed_1rx7y_439 { color: #15803d; background: #f0fdf4; border: 1px solid #dcfce7; } ._processing_1rx7y_451 { color: #ea580c; background: #fff7ed; border: 1px solid #fed7aa; } ._failed_1rx7y_463 { color: #dc2626; background: #fff1f2; border: 1px solid #fecdd3; } ._draft_1rx7y_475 { color: #334155; background: #f1f5f9; border: 1px solid #e2e8f0; } ._progressWrap_1rx7y_487 { width: 120px; margin-top: 7px; display: flex; flex-direction: column; gap: 4px; } ._progressWrap_1rx7y_487 span { color: #475569; font-size: 11px; } ._progressTrack_1rx7y_513 { width: 100%; height: 5px; overflow: hidden; border-radius: 999px; background: #e2e8f0; } ._progressFill_1rx7y_529 { height: 100%; border-radius: inherit; background: #2563eb; } /* ====================================================== ACTION ICONS ====================================================== */ ._downloadAction_1rx7y_549 { color: #2563eb !important; background: #eff6ff !important; border-color: #bfdbfe !important; } ._downloadAction_1rx7y_549:hover { background: #dbeafe !important; border-color: #93c5fd !important; } ._retryAction_1rx7y_571 { color: #ea580c !important; background: #fff7ed !important; border-color: #fed7aa !important; } ._retryAction_1rx7y_571:hover { background: #ffedd5 !important; border-color: #fdba74 !important; } ._continueAction_1rx7y_593 { color: #475569 !important; background: #f8fafc !important; border-color: #e2e8f0 !important; } ._continueAction_1rx7y_593:hover { background: #f1f5f9 !important; border-color: #cbd5e1 !important; } /* ====================================================== RESPONSIVE ====================================================== */ @media (max-width: 768px) { ._historyHeader_1rx7y_9 { padding: 16px 14px 0; } ._videoCell_1rx7y_129 { min-width: 220px; } ._videoThumb_1rx7y_143 { width: 88px; height: 54px; min-width: 88px; } ._formatGroup_1rx7y_319 { min-width: 150px; } } /* ====================================================== VIDEO TO DOCUMENT VIEW Preview removed. Download-focused layout. ====================================================== */ ._titleRow_uucy0_11 { display: flex; align-items: center; flex-wrap: wrap; gap: var(--space-3); } ._completedBadge_uucy0_25 { min-height: 30px; padding: 0 var(--space-3); border: 1px solid #bbf7d0; border-radius: var(--radius-md); background: #f0fdf4; color: #15803d; display: inline-flex; align-items: center; justify-content: center; gap: var(--space-1); font-size: var(--font-size-xs); font-weight: var(--font-weight-semibold); } /* ====================================================== VIDEO SUMMARY ====================================================== */ ._videoSummaryCard_uucy0_63 { margin-top: var(--space-4); overflow: hidden; } ._videoSummaryGrid_uucy0_73 { display: grid; grid-template-columns: 245px minmax(0, 1fr); align-items: center; gap: var(--space-6); } ._videoPreview_uucy0_87 { position: relative; height: 122px; overflow: hidden; border-radius: 12px; background: #0f172a; box-shadow: inset 0 0 0 1px rgba(255, 255, 255, 0.08); } ._videoScene_uucy0_105 { position: absolute; inset: 0; background: linear-gradient(180deg, rgba(30, 41, 59, 0.12), rgba(15, 23, 42, 0.7)), linear-gradient(120deg, #334155, #111827); } ._presentationBoard_uucy0_121 { position: absolute; right: var(--space-4); top: var(--space-4); width: 82px; height: 52px; border-radius: var(--radius-sm); background: linear-gradient(135deg, #dbeafe, #ffffff); } ._presenter_uucy0_141 { position: absolute; left: 105px; top: 16px; width: 42px; height: 84px; } ._presenterHead_uucy0_157 { width: 23px; height: 23px; margin: auto; border-radius: 999px; background: #d6a078; } ._presenterBody_uucy0_173 { width: 40px; height: 58px; margin-top: 2px; border-radius: 12px 12px 6px 6px; background: #273549; } ._audienceOne_uucy0_189, ._audienceTwo_uucy0_191 { position: absolute; bottom: -14px; width: 50px; height: 50px; border-radius: 999px; background: #0f172a; } ._audienceOne_uucy0_189 { left: var(--space-3); } ._audienceTwo_uucy0_191 { left: 58px; } ._playButton_uucy0_225 { position: absolute; left: 50%; top: 50%; width: 44px; height: 44px; transform: translate(-50%, -50%); border: 2px solid rgba(255, 255, 255, 0.9); border-radius: 999px; background: rgba(15, 23, 42, 0.7); color: #ffffff; display: inline-flex; align-items: center; justify-content: center; font-size: var(--font-size-lg); cursor: pointer; transition: transform var(--transition-fast), background var(--transition-fast); } ._playButton_uucy0_225:hover { transform: translate(-50%, -50%) scale(1.06); background: rgba(15, 23, 42, 0.9); } ._videoDuration_uucy0_277 { position: absolute; right: var(--space-2); bottom: var(--space-2); padding: 3px 7px; border-radius: var(--radius-sm); background: rgba(15, 23, 42, 0.88); color: #ffffff; font-size: 10px; font-weight: var(--font-weight-semibold); } ._videoDetails_uucy0_301 { min-width: 0; } ._videoDetails_uucy0_301 h2 { margin: 0 0 var(--space-5); color: var(--text-primary-dark); font-size: var(--font-size-lg); font-weight: var(--font-weight-bold); } ._videoMetaGrid_uucy0_323 { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: var(--space-6); } ._videoMetaItem_uucy0_335 { min-width: 0; display: flex; align-items: flex-start; gap: var(--space-2); } ._metaIcon_uucy0_349 { width: 34px; height: 34px; flex: 0 0 34px; border-radius: 9px; background: var(--brand-soft); color: var(--color-primary); display: inline-flex; align-items: center; justify-content: center; font-size: var(--font-size-lg); } ._videoMetaItem_uucy0_335 div { min-width: 0; } ._videoMetaItem_uucy0_335 small, ._videoMetaItem_uucy0_335 strong { display: block; } ._videoMetaItem_uucy0_335 small { margin-bottom: 3px; color: var(--text-secondary); font-size: var(--font-size-xs); } ._videoMetaItem_uucy0_335 strong { color: var(--text-primary-dark); font-size: var(--font-size-sm); font-weight: var(--font-weight-semibold); line-height: 1.35; } /* ====================================================== MAIN CONTENT ====================================================== */ ._mainGrid_uucy0_427 { margin-top: var(--space-4); display: grid; grid-template-columns: 1fr; align-items: start; gap: var(--space-4); } ._leftColumn_uucy0_443 { width: 100%; min-width: 0; display: flex; flex-direction: column; gap: var(--space-4); } ._sectionHeader_uucy0_459 { padding: var(--space-4) var(--space-5) var(--space-3); } ._sectionHeader_uucy0_459 h2 { margin: 0; color: var(--text-primary-dark); font-size: var(--font-size-lg); font-weight: var(--font-weight-bold); } ._sectionHeader_uucy0_459 p { margin: var(--space-1) 0 0; color: var(--text-secondary); font-size: var(--font-size-sm); } /* ====================================================== GENERATED FILES ====================================================== */ ._generatedSection_uucy0_501 { overflow: hidden; border: 1px solid var(--border-light); border-radius: 14px; background: var(--color-white); box-shadow: 0 2px 10px rgba(15, 23, 42, 0.04); } ._generatedFiles_uucy0_517 { padding: 0 var(--space-5) var(--space-5); display: grid; grid-template-columns: repeat(5, minmax(0, 1fr)); gap: var(--space-3); } ._fileCard_uucy0_531 { position: relative; min-width: 0; min-height: 178px; padding: var(--space-4); padding-bottom: 68px; border: 1px solid var(--border-light); border-radius: 13px; background: var(--color-white); display: flex; align-items: flex-start; gap: var(--space-3); transition: transform var(--transition-fast), border-color var(--transition-fast), box-shadow var(--transition-fast); } ._fileCard_uucy0_531:hover { transform: translateY(-2px); border-color: var(--border-default); box-shadow: 0 10px 24px rgba(15, 23, 42, 0.07); } ._fileIcon_uucy0_579 { width: 46px; height: 56px; flex: 0 0 46px; border-radius: 10px; color: #ffffff; display: inline-flex; align-items: center; justify-content: center; font-size: 10px; font-weight: var(--font-weight-bold); box-shadow: 0 6px 14px rgba(15, 23, 42, 0.12); } ._pdfIcon_uucy0_607 { background: linear-gradient(180deg, #ff5b5b, #ef4444); } ._docxIcon_uucy0_615 { background: linear-gradient(180deg, #2f80ed, #1264d8); font-size: 24px; } ._xlsxIcon_uucy0_625 { background: linear-gradient(180deg, #20b968, #0f9f56); font-size: 24px; } ._fileCardBody_uucy0_635 { flex: 1; min-width: 0; } ._fileCardTop_uucy0_645 { min-width: 0; padding-right: 62px; } ._fileInfo_uucy0_655 { min-width: 0; } ._fileInfo_uucy0_655 strong { display: block; color: var(--text-primary-dark); font-size: var(--font-size-sm); font-weight: var(--font-weight-semibold); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; } ._fileInfo_uucy0_655 span { display: block; margin-top: var(--space-1); color: var(--text-secondary); font-size: var(--font-size-xs); line-height: 1.45; } ._readyBadge_uucy0_699 { position: absolute; top: var(--space-4); right: var(--space-4); min-height: 26px; padding: 0 8px; border: 1px solid #bbf7d0; border-radius: 8px; background: #f0fdf4; color: #15803d; display: inline-flex; align-items: center; gap: 4px; font-size: 11px; font-weight: var(--font-weight-medium); } ._fileActions_uucy0_733 { position: absolute; left: 0; right: 0; bottom: var(--space-4); display: flex; align-items: center; justify-content: center; } ._fileActionBtn_uucy0_753 { width: 138px !important; min-height: 38px !important; padding: 0 var(--space-3) !important; font-size: var(--font-size-xs) !important; justify-content: center !important; } /* ====================================================== CONVERSION DETAILS ====================================================== */ ._conversionSection_uucy0_777 { overflow: hidden; border: 1px solid var(--border-light); border-radius: 14px; background: var(--color-white); box-shadow: 0 2px 10px rgba(15, 23, 42, 0.04); } ._conversionSection_uucy0_777 ._sectionHeader_uucy0_459 { padding-bottom: var(--space-2); } ._detailsList_uucy0_801 { margin: 0 var(--space-5) var(--space-5); border: 1px solid var(--border-light); border-radius: 12px; background: var(--color-white); display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); overflow: hidden; } ._detailsList_uucy0_801 > div { min-width: 0; min-height: 76px; padding: var(--space-4) var(--space-5); display: flex; flex-direction: column; justify-content: center; gap: 6px; } ._detailsList_uucy0_801 > div + div { border-left: 1px solid var(--border-light); } ._detailsList_uucy0_801 span { color: var(--text-secondary); font-size: var(--font-size-xs); } ._detailsList_uucy0_801 strong { color: var(--text-primary-dark); font-size: var(--font-size-sm); font-weight: var(--font-weight-semibold); line-height: 1.4; } /* ====================================================== RESPONSIVE ====================================================== */ @media (max-width: 1480px) { ._generatedFiles_uucy0_517 { grid-template-columns: repeat(4, minmax(0, 1fr)); } } @media (max-width: 1240px) { ._videoMetaGrid_uucy0_323 { grid-template-columns: repeat(2, minmax(0, 1fr)); } ._generatedFiles_uucy0_517 { grid-template-columns: repeat(3, minmax(0, 1fr)); } } @media (max-width: 980px) { ._videoSummaryGrid_uucy0_73 { grid-template-columns: 200px minmax(0, 1fr); } ._generatedFiles_uucy0_517 { grid-template-columns: repeat(2, minmax(0, 1fr)); } } @media (max-width: 720px) { ._videoSummaryGrid_uucy0_73 { grid-template-columns: 1fr; } ._videoPreview_uucy0_87 { height: 180px; } ._videoMetaGrid_uucy0_323 { grid-template-columns: 1fr 1fr; } ._detailsList_uucy0_801 { grid-template-columns: 1fr; } ._detailsList_uucy0_801 > div + div { border-left: 0; border-top: 1px solid var(--border-light); } } @media (max-width: 620px) { ._generatedFiles_uucy0_517 { grid-template-columns: 1fr; } } @media (max-width: 560px) { ._titleRow_uucy0_11 { align-items: flex-start; flex-direction: column; } ._videoMetaGrid_uucy0_323 { grid-template-columns: 1fr; } ._generatedFiles_uucy0_517 { padding-left: var(--space-3); padding-right: var(--space-3); } ._detailsList_uucy0_801 { margin-left: var(--space-3); margin-right: var(--space-3); } } /* ====================================================== VIDEO TO DOCUMENT - ADD PAGE Colors/buttons/cards are driven by global theme variables and global classes such as content-card / app-btn. ====================================================== */ ._page_140rv_13 { padding-bottom: 92px; } /* ====================================================== HEADER ====================================================== */ ._header_140rv_29 { display: flex; align-items: flex-start; justify-content: space-between; gap: var(--space-6); margin-bottom: var(--space-5); } ._breadcrumb_140rv_45 { margin-top: var(--space-1); display: flex; align-items: center; gap: var(--space-2); color: var(--text-secondary); font-size: var(--font-size-sm); } ._breadcrumb_140rv_45 strong { color: var(--text-primary-dark); font-weight: var(--font-weight-medium); } ._subtitle_140rv_79 { margin: var(--space-2) 0 0; color: var(--text-secondary); font-size: var(--font-size-base); } /* ====================================================== MAIN GRID ====================================================== */ ._pageGrid_140rv_103 { display: grid; grid-template-columns: minmax(0, 1.7fr) minmax(320px, 0.85fr); align-items: start; gap: var(--space-4); } ._leftColumn_140rv_119 { min-width: 0; display: flex; flex-direction: column; gap: var(--space-4); } ._sectionCard_140rv_137 { padding: var(--space-4); } ._sectionTitle_140rv_145, ._summaryTitle_140rv_147 { display: flex; align-items: center; gap: var(--space-2); color: var(--text-primary-dark); } ._sectionTitle_140rv_145 { margin-bottom: var(--space-3); } ._sectionTitle_140rv_145 > svg, ._summaryTitle_140rv_147 > svg { flex-shrink: 0; color: var(--color-primary); font-size: var(--font-size-xl); } ._sectionTitle_140rv_145 h2, ._summaryTitle_140rv_147 h2 { margin: 0; font-size: var(--font-size-lg); font-weight: var(--font-weight-bold); } ._sectionTitle_140rv_145 p { margin: 3px 0 0; color: var(--text-secondary); font-size: var(--font-size-xs); } /* ====================================================== UPLOAD ====================================================== */ ._hiddenInput_140rv_231 { display: none; } ._dropZone_140rv_239 { min-height: 196px; padding: var(--space-5); border: 1px dashed var(--border-medium); border-radius: var(--radius-lg); background: var(--surface-muted); display: flex; flex-direction: column; align-items: center; justify-content: center; gap: var(--space-3); text-align: center; cursor: pointer; transition: border-color var(--transition-fast), background var(--transition-fast); } ._dropZone_140rv_239:hover, ._dropZone_140rv_239:focus-visible { border-color: var(--color-primary); background: var(--brand-soft); outline: none; } ._uploadIcon_140rv_305 { width: 58px; height: 58px; border: 1px solid var(--border-light); border-radius: var(--radius-full); background: var(--color-white); color: var(--color-primary); display: inline-flex; align-items: center; justify-content: center; font-size: 30px; } ._dropZone_140rv_239 strong { color: var(--text-primary-dark); font-size: var(--font-size-base); font-weight: var(--font-weight-semibold); } ._dropZone_140rv_239 > span { color: var(--text-secondary); font-size: var(--font-size-xs); } ._uploadedVideo_140rv_365 { margin-top: var(--space-3); padding: var(--space-3); border: 1px solid var(--border-light); border-radius: var(--radius-lg); display: grid; grid-template-columns: 170px minmax(0, 1fr) auto auto auto; align-items: center; gap: var(--space-3); } ._videoThumb_140rv_393 { position: relative; width: 170px; height: 86px; overflow: hidden; border-radius: var(--radius-md); background: var(--text-primary-dark); } ._fakeVideoScene_140rv_419 { position: absolute; inset: 0; overflow: hidden; background: linear-gradient(180deg, transparent 0%, rgba(15, 23, 42, 0.45) 100%), linear-gradient(135deg, #334155, #111827); } ._fakeBoard_140rv_443 { position: absolute; right: 10px; top: 11px; width: 62px; height: 38px; border-radius: var(--radius-sm); background: var(--surface-muted); } ._fakePresenter_140rv_471 { position: absolute; left: 73px; bottom: 8px; width: 30px; height: 50px; border-radius: var(--radius-lg) var(--radius-lg) 4px 4px; background: #273549; } ._fakePresenter_140rv_471::before { content: ""; position: absolute; left: 6px; top: -16px; width: 18px; height: 18px; border-radius: var(--radius-full); background: #d6a078; } ._videoDuration_140rv_531 { position: absolute; left: var(--space-2); bottom: var(--space-2); padding: 2px 6px; border-radius: var(--radius-sm); background: rgba(15, 23, 42, 0.84); color: var(--color-white); display: inline-flex; align-items: center; gap: 4px; font-size: 10px; } ._uploadedInfo_140rv_573 { min-width: 0; } ._uploadedInfo_140rv_573 strong, ._uploadedInfo_140rv_573 span { display: block; } ._uploadedInfo_140rv_573 strong { overflow: hidden; color: var(--text-primary-dark); font-size: var(--font-size-sm); font-weight: var(--font-weight-semibold); white-space: nowrap; text-overflow: ellipsis; } ._uploadedInfo_140rv_573 span { margin-top: var(--space-1); color: var(--text-secondary); font-size: var(--font-size-xs); } ._uploadedBadge_140rv_631 { min-height: 30px; padding: 0 var(--space-2); border: 1px solid #dcfce7; border-radius: var(--radius-md); background: #f0fdf4; color: var(--color-success); display: inline-flex; align-items: center; gap: var(--space-1); font-size: var(--font-size-xs); font-weight: var(--font-weight-medium); white-space: nowrap; } /* ====================================================== OUTPUT FORMATS ====================================================== */ ._formatGrid_140rv_683 { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: var(--space-3); } ._formatCard_140rv_697 { position: relative; min-height: 92px; padding: var(--space-3); border: 1px solid var(--border-light); border-radius: var(--radius-lg); background: var(--color-white); color: inherit; display: flex; align-items: center; gap: var(--space-3); text-align: left; cursor: pointer; transition: border-color var(--transition-fast), background var(--transition-fast), box-shadow var(--transition-fast), transform var(--transition-fast); } ._formatCard_140rv_697:hover { border-color: var(--color-primary); box-shadow: var(--shadow-sm); transform: translateY(-1px); } ._formatCardSelected_140rv_771 { border-color: var(--color-primary); background: var(--brand-soft); box-shadow: 0 0 0 1px color-mix(in srgb, var(--color-primary) 12%, transparent); } ._formatIcon_140rv_789 { width: 44px; height: 50px; flex: 0 0 44px; border-radius: var(--radius-md); display: inline-flex; align-items: center; justify-content: center; font-size: 26px; } ._pdfIcon_140rv_819 { background: color-mix(in srgb, var(--color-danger) 10%, var(--color-white)); color: var(--color-danger); } ._docxIcon_140rv_829 { background: color-mix(in srgb, var(--color-primary) 10%, var(--color-white)); color: var(--color-primary); } ._xlsxIcon_140rv_839 { background: color-mix(in srgb, var(--color-success) 10%, var(--color-white)); color: var(--color-success); } ._formatText_140rv_849 { min-width: 0; } ._formatText_140rv_849 strong, ._formatText_140rv_849 small { display: block; } ._formatText_140rv_849 strong { color: var(--text-primary-dark); font-size: var(--font-size-sm); font-weight: var(--font-weight-semibold); } ._formatText_140rv_849 small { margin-top: var(--space-1); color: var(--text-secondary); font-size: var(--font-size-xs); } ._selectedCheck_140rv_897 { position: absolute; right: var(--space-2); top: var(--space-2); width: 22px; height: 22px; border-radius: var(--radius-full); background: var(--color-primary); color: var(--color-white); display: inline-flex; align-items: center; justify-content: center; font-size: 13px; } /* ====================================================== DOCUMENT DETAILS ====================================================== */ ._detailsGrid_140rv_947 { display: grid; grid-template-columns: minmax(0, 1.6fr) minmax(220px, 0.8fr); gap: var(--space-3); } ._field_140rv_961 { min-width: 0; display: flex; flex-direction: column; gap: var(--space-1); } ._field_140rv_961 > span { color: var(--text-primary-dark); font-size: var(--font-size-xs); font-weight: var(--font-weight-medium); } ._field_140rv_961 input, ._field_140rv_961 select, ._field_140rv_961 textarea { width: 100%; border: 1px solid var(--border-default); border-radius: var(--radius-md); background: var(--color-white); color: var(--text-primary-dark); font: inherit; outline: none; transition: border-color var(--transition-fast), box-shadow var(--transition-fast); } ._field_140rv_961 input, ._field_140rv_961 select { min-height: 40px; padding: 0 var(--space-3); } ._field_140rv_961 textarea { min-height: 76px; padding: var(--space-3); resize: vertical; } ._field_140rv_961 input:focus, ._field_140rv_961 select:focus, ._field_140rv_961 textarea:focus { border-color: var(--color-primary); box-shadow: 0 0 0 3px color-mix(in srgb, var(--color-primary) 12%, transparent); } ._instructionField_140rv_1081 { margin-top: var(--space-3); } ._helperText_140rv_1089 { margin: var(--space-1) 0 0; color: var(--text-secondary); font-size: var(--font-size-xs); } /* ====================================================== SUMMARY CARD ====================================================== */ ._summaryCard_140rv_1113 { position: sticky; top: var(--space-4); min-width: 0; padding: var(--space-4); } ._summaryTitle_140rv_147 { margin-bottom: var(--space-4); } ._summarySection_140rv_1141 { padding: var(--space-4) 0; border-top: 1px solid var(--border-light); } ._summarySection_140rv_1141:first-of-type { padding-top: 0; border-top: 0; } ._summarySection_140rv_1141 h3 { margin: 0 0 var(--space-3); color: var(--text-primary-dark); font-size: var(--font-size-sm); font-weight: var(--font-weight-semibold); } ._summaryVideo_140rv_1183 { display: grid; grid-template-columns: 108px minmax(0, 1fr); align-items: center; gap: var(--space-3); } ._summaryThumb_140rv_1199 { position: relative; width: 108px; height: 62px; overflow: hidden; border-radius: var(--radius-md); background: var(--text-primary-dark); } ._summaryVideo_140rv_1183 strong, ._summaryVideo_140rv_1183 span { display: block; } ._summaryVideo_140rv_1183 strong { overflow: hidden; color: var(--text-primary-dark); font-size: var(--font-size-sm); font-weight: var(--font-weight-semibold); white-space: nowrap; text-overflow: ellipsis; } ._summaryVideo_140rv_1183 span { margin-top: var(--space-1); color: var(--text-secondary); font-size: var(--font-size-xs); } ._summaryMeta_140rv_1275 { margin-top: var(--space-4); display: flex; flex-direction: column; gap: var(--space-3); } ._summaryMeta_140rv_1275 > div { display: grid; grid-template-columns: 22px minmax(90px, 1fr) auto; align-items: center; gap: var(--space-2); } ._summaryMeta_140rv_1275 svg { color: var(--color-primary); font-size: var(--font-size-lg); } ._summaryMeta_140rv_1275 span { color: var(--text-secondary); font-size: var(--font-size-sm); } ._summaryMeta_140rv_1275 strong { color: var(--text-primary-dark); font-size: var(--font-size-sm); font-weight: var(--font-weight-semibold); } ._summaryFormats_140rv_1347 { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: var(--space-2); } ._summaryFormat_140rv_1347 { min-height: 48px; padding: 0 var(--space-2); border: 1px solid var(--border-light); border-radius: var(--radius-md); display: inline-flex; align-items: center; justify-content: center; gap: var(--space-2); font-size: var(--font-size-xs); font-weight: var(--font-weight-semibold); } ._pdfFormat_140rv_1397 { background: color-mix(in srgb, var(--color-danger) 7%, var(--color-white)); color: var(--color-danger); } ._docxFormat_140rv_1407 { background: color-mix(in srgb, var(--color-primary) 7%, var(--color-white)); color: var(--color-primary); } ._xlsxFormat_140rv_1417 { background: color-mix(in srgb, var(--color-success) 7%, var(--color-white)); color: var(--color-success); } ._prepareHeading_140rv_1427 { display: flex; align-items: center; gap: var(--space-2); } ._prepareHeading_140rv_1427 svg { color: var(--color-primary); } ._prepareList_140rv_1449 { display: flex; flex-direction: column; gap: var(--space-3); } ._prepareList_140rv_1449 > div { display: flex; align-items: center; gap: var(--space-3); } ._prepareList_140rv_1449 > div > span { width: 30px; height: 30px; flex: 0 0 30px; border-radius: var(--radius-full); background: var(--surface-muted); color: var(--text-primary-dark); display: inline-flex; align-items: center; justify-content: center; font-size: var(--font-size-xs); font-weight: var(--font-weight-semibold); } ._prepareList_140rv_1449 p { margin: 0; color: var(--text-secondary); font-size: var(--font-size-sm); } ._summaryNote_140rv_1531 { margin: var(--space-5) 0 0; color: var(--text-secondary); font-size: var(--font-size-xs); font-style: italic; } ._emptySummary_140rv_1549 { color: var(--text-secondary); font-size: var(--font-size-xs); } /* ====================================================== BOTTOM ACTION BAR ====================================================== */ ._actionBar_140rv_1569 { position: sticky; left: 0; right: 0; bottom: 0; z-index: 20; margin-top: var(--space-4); padding: var(--space-3) 0; border-top: 1px solid var(--border-light); background: color-mix(in srgb, var(--color-white) 96%, transparent); display: flex; align-items: center; justify-content: space-between; gap: var(--space-4); backdrop-filter: blur(10px); } ._selectedCount_140rv_1619 { display: flex; align-items: center; gap: var(--space-2); color: var(--text-primary-dark); font-size: var(--font-size-sm); } ._countIcon_140rv_1641 { width: 26px; height: 26px; border-radius: var(--radius-full); background: var(--color-primary); color: var(--color-white); display: inline-flex; align-items: center; justify-content: center; } ._actionButtons_140rv_1669 { display: flex; align-items: center; gap: var(--space-3); } ._actionButtons_140rv_1669 .app-btn { min-width: 142px; } /* ====================================================== RESPONSIVE ====================================================== */ @media (max-width: 1180px) { ._pageGrid_140rv_103 { grid-template-columns: minmax(0, 1fr) 340px; } ._uploadedVideo_140rv_365 { grid-template-columns: 150px minmax(0, 1fr) auto auto; } ._videoThumb_140rv_393 { width: 150px; } ._uploadedBadge_140rv_631 { grid-column: 2; } } @media (max-width: 980px) { ._pageGrid_140rv_103 { grid-template-columns: 1fr; } ._summaryCard_140rv_1113 { position: static; } } @media (max-width: 760px) { ._header_140rv_29 { flex-direction: column; } ._formatGrid_140rv_683, ._summaryFormats_140rv_1347 { grid-template-columns: 1fr; } ._detailsGrid_140rv_947 { grid-template-columns: 1fr; } ._uploadedVideo_140rv_365 { grid-template-columns: 110px minmax(0, 1fr) auto; } ._videoThumb_140rv_393 { width: 110px; } ._uploadedBadge_140rv_631 { grid-column: 2; } ._uploadedVideo_140rv_365 .app-btn { grid-column: 2 / -1; } ._actionBar_140rv_1569 { align-items: stretch; flex-direction: column; } ._actionButtons_140rv_1669 { display: grid; grid-template-columns: 1fr 1fr; } ._actionButtons_140rv_1669 .app-btn { width: 100%; min-width: 0; } } @media (max-width: 520px) { ._sectionCard_140rv_137, ._summaryCard_140rv_1113 { padding: var(--space-3); } ._uploadedVideo_140rv_365 { grid-template-columns: 1fr; } ._videoThumb_140rv_393 { width: 100%; height: 150px; } ._uploadedBadge_140rv_631, ._uploadedVideo_140rv_365 .app-btn { grid-column: auto; } ._summaryVideo_140rv_1183 { grid-template-columns: 84px minmax(0, 1fr); } ._summaryThumb_140rv_1199 { width: 84px; height: 52px; } ._actionButtons_140rv_1669 { grid-template-columns: 1fr; } } /* ====================================================== FINAL OUTER CARD POLISH UI ONLY - keeps all existing logic untouched ====================================================== */ /* Main left-side sections: Upload video / Output formats / Document details */ ._sectionCard_140rv_137 { position: relative; padding: var(--space-5); border: 1px solid var(--border-light) !important; border-radius: var(--radius-xl) !important; background: var(--color-white) !important; box-shadow: var(--shadow-sm); overflow: hidden; transition: border-color var(--transition-fast), box-shadow var(--transition-fast), transform var(--transition-fast); } ._sectionCard_140rv_137:hover { border-color: var(--border-default) !important; box-shadow: var(--shadow-md); } /* subtle top accent so each block reads as its own outer card */ ._sectionCard_140rv_137::before { content: ""; position: absolute; left: 0; top: 0; width: 100%; height: 3px; background: linear-gradient( 90deg, var(--color-primary), var(--color-primary-light) ); opacity: 0.9; } /* Right conversion summary becomes a clearly separated outer card */ ._summaryCard_140rv_1113 { position: sticky; top: var(--space-4); min-width: 0; padding: var(--space-5); border: 1px solid var(--border-light) !important; border-radius: var(--radius-xl) !important; background: var(--color-white) !important; box-shadow: var(--shadow-sm); overflow: hidden; } ._summaryCard_140rv_1113::before { content: ""; position: absolute; left: 0; top: 0; width: 100%; height: 3px; background: linear-gradient( 90deg, var(--color-primary), var(--color-primary-light) ); } /* Improve spacing between the visible outer cards */ ._leftColumn_140rv_119 { gap: var(--space-5); } ._pageGrid_140rv_103 { gap: var(--space-5); } /* Section heading area inside the card */ ._sectionTitle_140rv_145 { margin-bottom: var(--space-4); padding-bottom: var(--space-3); border-bottom: 1px solid var(--border-light); } ._sectionTitle_140rv_145 h2, ._summaryTitle_140rv_147 h2 { font-size: var(--font-size-lg); font-weight: var(--font-weight-bold); } /* Keep output-format cards visually nested inside their outer card */ ._formatCard_140rv_697 { border-color: var(--border-light); background: var(--surface-muted); } ._formatCardSelected_140rv_771 { border-color: var(--color-primary); background: var(--brand-soft); } /* Document details should feel like one contained block */ ._detailsGrid_140rv_947 { padding: var(--space-1) 0 0; } /* Right summary internal separators stay light */ ._summarySection_140rv_1141 { border-top-color: var(--border-light); } /* Bottom action area as an outer card instead of a flat strip */ ._actionBar_140rv_1569 { position: sticky; left: auto; right: auto; bottom: var(--space-2); z-index: 20; margin-top: var(--space-5); padding: var(--space-3) var(--space-4); border: 1px solid var(--border-light); border-radius: var(--radius-xl); background: color-mix(in srgb, var(--color-white) 97%, transparent); box-shadow: var(--shadow-md); display: flex; align-items: center; justify-content: space-between; gap: var(--space-4); backdrop-filter: blur(10px); } /* Make the selected-count indicator look part of the bottom card */ ._selectedCount_140rv_1619 { min-height: 38px; padding: 0 var(--space-2); border-radius: var(--radius-md); color: var(--text-primary-dark); } /* Slightly stronger visual containment for upload inner areas */ ._dropZone_140rv_239, ._uploadedVideo_140rv_365 { border-color: var(--border-default); } /* Keep the page bottom clear for the floating/sticky action card */ ._page_140rv_13 { padding-bottom: 110px; } /* ====================================================== RESPONSIVE OUTER CARD POLISH ====================================================== */ @media (max-width: 980px) { ._summaryCard_140rv_1113 { position: static; } ._pageGrid_140rv_103, ._leftColumn_140rv_119 { gap: var(--space-4); } } @media (max-width: 760px) { ._sectionCard_140rv_137, ._summaryCard_140rv_1113 { padding: var(--space-4); } ._actionBar_140rv_1569 { bottom: var(--space-2); align-items: stretch; flex-direction: column; } } @media (max-width: 520px) { ._sectionCard_140rv_137, ._summaryCard_140rv_1113 { padding: var(--space-3); border-radius: var(--radius-lg) !important; } ._actionBar_140rv_1569 { padding: var(--space-3); border-radius: var(--radius-lg); } } /* ========================================================= AI VIDEO SUMMARY CommonTable itself uses CommonTable.module.css ========================================================= */ /* ========================================================= SUMMARY CARD ========================================================= */ ._summaryCard_xzv03_19 { width: 100%; min-width: 0; overflow: hidden; margin-top: 14px; border: 1px solid var(--line, #e3e8f0); border-radius: 8px; background: var(--surface, #ffffff); box-shadow: 0 1px 3px rgba(15, 23, 42, 0.04); } /* ========================================================= SUMMARY TITLE ========================================================= */ ._summaryHeader_xzv03_61 { min-height: 52px; display: flex; align-items: center; padding: 0 14px; border-bottom: 1px solid var(--line, #e3e8f0); background: var(--surface, #ffffff); } ._summaryHeader_xzv03_61 h2 { margin: 0; color: var(--ink, #101b3d); font-family: var(--font); font-size: 16px; line-height: 1.3; font-weight: 700; } /* ========================================================= TOOLBAR ACTIONS ========================================================= */ ._toolbarActions_xzv03_123 { display: inline-flex; align-items: center; gap: 6px; } /* ========================================================= STATUS SELECT ========================================================= */ ._statusSelect_xzv03_145 { min-width: 125px; height: 27px; padding: 0 27px 0 9px; border: 1px solid #e2e8f0; border-radius: 4px; outline: none; background: #ffffff; color: #4a5568; font-family: var(--font); font-size: 10px; font-weight: 500; cursor: pointer; transition: border-color 130ms ease, box-shadow 130ms ease; } ._statusSelect_xzv03_145:hover { border-color: #cbd5e0; } ._statusSelect_xzv03_145:focus { border-color: var(--color-primary, #0866ff); box-shadow: 0 0 0 2px rgba(8, 102, 255, 0.06); } /* ========================================================= STAT GREEN ========================================================= */ ._green_xzv03_229 { color: #079455 !important; background: #ecfdf3 !important; } /* ========================================================= STAT RED ========================================================= */ ._red_xzv03_249 { color: #f04438 !important; background: #fff0f1 !important; } /* ========================================================= VIDEO CELL ========================================================= */ ._videoCell_xzv03_269 { min-width: 195px; display: flex; align-items: center; gap: 9px; } /* ========================================================= THUMBNAIL ========================================================= */ ._thumbnail_xzv03_295 { width: 62px; height: 38px; flex: 0 0 62px; overflow: hidden; border-radius: 5px; border: 1px solid var(--line, #e3e8f0); background: #09295f; } ._thumbnail_xzv03_295 img { width: 100%; height: 100%; display: block; object-fit: cover; } /* ========================================================= THUMBNAIL FALLBACK ========================================================= */ ._thumbnailFallback_xzv03_353 { width: 100%; height: 100%; padding: 5px; display: flex; align-items: center; gap: 4px; overflow: hidden; color: #ffffff; background: linear-gradient( 135deg, #101b3d, #0866ff ); } ._thumbnailFallback_xzv03_353 svg { width: 10px; height: 10px; flex: 0 0 10px; } ._thumbnailFallback_xzv03_353 span { min-width: 0; overflow: hidden; color: #ffffff; font-size: 6px; line-height: 1.2; font-weight: 500; white-space: nowrap; text-overflow: ellipsis; } /* ========================================================= VIDEO TITLE ========================================================= */ ._videoTitle_xzv03_453 { min-width: 0; max-width: 160px; overflow: hidden; color: var(--ink, #101b3d); font-family: var(--font); font-size: 10px; font-weight: 500; white-space: nowrap; text-overflow: ellipsis; } /* ========================================================= STATUS ========================================================= */ ._statusBadge_xzv03_499 { width: fit-content; min-height: 22px; padding: 3px 8px; display: inline-flex; align-items: center; gap: 5px; border-radius: 5px; font-family: var(--font); font-size: 9px; font-weight: 500; white-space: nowrap; } /* ========================================================= STATUS DOT ========================================================= */ ._statusDot_xzv03_551 { width: 6px; height: 6px; flex: 0 0 6px; border-radius: 50%; background: currentColor; } /* ========================================================= COMPLETED ========================================================= */ ._completed_xzv03_581 { color: #078849; background: #e9f9f0; } /* ========================================================= PROCESSING ========================================================= */ ._processing_xzv03_601 { color: #ae6900; background: #fff6e7; } /* ========================================================= FAILED ========================================================= */ ._failed_xzv03_621 { color: #e52c35; background: #fff0f1; } /* ========================================================= QUEUED ========================================================= */ ._queued_xzv03_641 { color: #57657c; background: #eff2f6; } /* ========================================================= PROCESSING WRAPPER ========================================================= */ ._processingWrap_xzv03_661 { width: 105px; display: flex; flex-direction: column; gap: 4px; } /* ========================================================= PROCESSING BAR ========================================================= */ ._progressTrack_xzv03_687 { width: 100%; height: 5px; overflow: hidden; border-radius: 999px; background: #e6ebf1; } ._progressFill_xzv03_709 { display: block; height: 100%; border-radius: inherit; background: #ffb82e; transition: width 200ms ease; } /* ========================================================= DOWNLOAD ACTION Same dimensions are supplied by global ct-icon-action. ========================================================= */ ._downloadAction_xzv03_747 { color: #f59e0b !important; border-color: #f8dda8 !important; background: #fff8e9 !important; } ._downloadAction_xzv03_747:hover { color: #d98500 !important; border-color: #f2c66f !important; background: #fff1d5 !important; } /* ========================================================= RETRY BUTTON ========================================================= */ ._retryButton_xzv03_787 { min-width: 65px; height: 28px; padding: 0 9px; display: inline-flex; align-items: center; justify-content: center; gap: 5px; border: 1px solid #e2e8f0; border-radius: 5px; background: #ffffff; color: #4a5568; font-family: var(--font); font-size: 9px; font-weight: 500; cursor: pointer; transition: background 130ms ease, border-color 130ms ease, color 130ms ease; } ._retryButton_xzv03_787 svg { width: 12px; height: 12px; } ._retryButton_xzv03_787:hover { color: var(--color-primary, #0866ff); border-color: #b9cff0; background: #f5f9ff; } /* ========================================================= ACTION GROUP ========================================================= */ .ct-action-group { display: inline-flex; align-items: center; justify-content: center; gap: 6px; white-space: nowrap; } /* ========================================================= COMMON ICON ACTION ========================================================= */ .ct-icon-action { width: 29px; height: 29px; flex: 0 0 29px; padding: 0; display: inline-flex; align-items: center; justify-content: center; border-radius: 7px; cursor: pointer; transition: color 130ms ease, border-color 130ms ease, background 130ms ease, transform 130ms ease; } .ct-icon-action svg { width: 13px; height: 13px; } /* ========================================================= EYE VIEW ACTION ========================================================= */ .ct-icon-view { color: #2879ff; border: 1px solid #c4d9ff; background: #eff6ff; } .ct-icon-view:hover { color: #0866ff; border-color: #9fc4ff; background: #e5f0ff; transform: translateY(-1px); } /* ========================================================= REMOVE OUTER COMMON TABLE BORDER SummaryCard already has the outer border. ========================================================= */ ._summaryCard_xzv03_19 .ct-root { border: 0 !important; border-radius: 0 !important; box-shadow: none !important; } /* ========================================================= COMMON TABLE TOOLBAR ========================================================= */ ._summaryCard_xzv03_19 .ct-toolbar { min-height: 48px; padding: 8px 12px; background: #ffffff; } /* ========================================================= SEARCH SIZE ========================================================= */ ._summaryCard_xzv03_19 .ct-search-btn { width: 220px; min-width: 220px; } ._summaryCard_xzv03_19 .ct-search-box { width: 220px; min-width: 220px; } /* ========================================================= TABLE VIDEO COLUMN ========================================================= */ ._summaryCard_xzv03_19 .ct-table th:first-child, ._summaryCard_xzv03_19 .ct-table td:first-child { min-width: 220px; } /* ========================================================= TABLE ACTION COLUMN ========================================================= */ ._summaryCard_xzv03_19 .ct-table th:last-child, ._summaryCard_xzv03_19 .ct-table td:last-child { width: 90px; text-align: center; } /* ========================================================= COMPACT TABLE ========================================================= */ ._summaryCard_xzv03_19 .ct-thead th { padding-top: 8px; padding-bottom: 8px; } ._summaryCard_xzv03_19 .ct-tbody td { height: 52px; padding-top: 6px; padding-bottom: 6px; } /* ========================================================= PAGINATION No custom pagination is created. This only lightly adjusts CommonTable pagination. ========================================================= */ ._summaryCard_xzv03_19 .ct-pagination { min-height: 48px; } /* ========================================================= RESPONSIVE ========================================================= */ @media (max-width: 991px) { ._summaryCard_xzv03_19 .ct-search-btn, ._summaryCard_xzv03_19 .ct-search-box { width: 185px; min-width: 185px; } } @media (max-width: 767px) { ._summaryHeader_xzv03_61 { min-height: 46px; padding: 0 10px; } ._summaryHeader_xzv03_61 h2 { font-size: 14px; } ._toolbarActions_xzv03_123 { width: 100%; flex-wrap: wrap; } ._statusSelect_xzv03_145 { flex: 1; min-width: 120px; } ._summaryCard_xzv03_19 .ct-search-btn, ._summaryCard_xzv03_19 .ct-search-box { width: 100%; min-width: 0; } ._videoCell_xzv03_269 { min-width: 175px; } ._thumbnail_xzv03_295 { width: 54px; height: 34px; flex-basis: 54px; } ._videoTitle_xzv03_453 { max-width: 110px; } }/* ========================================================= AI VIDEO SUMMARY - CREATE PAGE Uses GLOBAL typography / colors / spacing / radius ========================================================= */ /* ========================================================= PAGE ========================================================= */ ._createPage_23hir_19 { width: 100%; min-width: 0; margin: 0; padding: 10px 10px 16px; box-sizing: border-box; color: var(--ink); background: var(--bg); font-family: var(--font); font-size: var(--font-size-base); font-weight: var(--font-weight-normal); } ._createPage_23hir_19 *, ._createPage_23hir_19 *::before, ._createPage_23hir_19 *::after { box-sizing: border-box; } /* ========================================================= BREADCRUMB ========================================================= */ ._breadcrumb_23hir_73 { width: 100%; display: flex; align-items: center; gap: var(--space-2); margin: 0 0 var(--space-2); padding: 0; color: var(--ink-soft); font-family: var(--font); font-size: var(--font-size-xs); line-height: 1.4; font-weight: var(--font-weight-normal); } ._breadcrumb_23hir_73 button { margin: 0; padding: 0; border: 0; outline: none; color: var(--ink-soft); background: transparent; font-family: var(--font); font-size: inherit; font-weight: var(--font-weight-normal); cursor: pointer; transition: color var(--transition-fast); } ._breadcrumb_23hir_73 button:hover { color: var(--brand); } ._breadcrumb_23hir_73 > span:not(:last-child) { color: var(--ink-muted); } ._breadcrumb_23hir_73 > span:last-child { color: var(--ink); } /* ========================================================= HEADER ========================================================= */ ._createHeader_23hir_181 { width: 100%; min-width: 0; display: flex; align-items: flex-start; justify-content: space-between; gap: var(--space-4); margin: 0 0 var(--space-3); padding: 0; } ._createHeading_23hir_209 { min-width: 0; flex: 1; } ._createHeading_23hir_209 h1 { margin: 0 0 var(--space-1); color: var(--ink); font-family: var(--font); /* Global 20px base + 8px gives reference-style title while remaining tied to global typography. */ font-size: calc(var(--font-size-2xl) + 8px); line-height: 1.15; font-weight: var(--font-weight-bold); letter-spacing: -0.5px; } ._createHeading_23hir_209 p { margin: 0; color: var(--ink-soft); font-family: var(--font); font-size: var(--font-size-base); line-height: 1.45; font-weight: var(--font-weight-normal); } /* ========================================================= BACK BUTTON ========================================================= */ ._backButton_23hir_287 { min-width: 120px; height: 38px; flex: 0 0 auto; display: inline-flex; align-items: center; justify-content: center; gap: var(--space-2); padding: 0 var(--space-3); border: 1px solid var(--border-default); border-radius: var(--radius-md); outline: none; color: var(--ink); background: var(--surface); font-family: var(--font); font-size: var(--font-size-xs); font-weight: var(--font-weight-medium); white-space: nowrap; cursor: pointer; transition: color var(--transition-fast), border-color var(--transition-fast), background var(--transition-fast), box-shadow var(--transition-fast); } ._backButton_23hir_287 svg { width: var(--font-size-md); height: var(--font-size-md); } ._backButton_23hir_287:hover { color: var(--brand); border-color: #b5cff5; background: var(--brand-soft); box-shadow: var(--shadow-sm); } /* ========================================================= MAIN GRID ========================================================= */ ._createGrid_23hir_399 { width: 100%; min-width: 0; display: grid; grid-template-columns: minmax(0, 2fr) minmax(300px, 0.95fr); align-items: start; gap: var(--space-3); margin: 0; padding: 0; } /* ========================================================= LEFT FORM COLUMN ========================================================= */ ._formColumn_23hir_443 { width: 100%; min-width: 0; display: flex; flex-direction: column; gap: var(--space-3); margin: 0; padding: 0; } /* ========================================================= COMMON CARDS ========================================================= */ ._formCard_23hir_477, ._settingsCard_23hir_479 { width: 100%; min-width: 0; margin: 0; border: 1px solid var(--line); border-radius: var(--radius-lg); background: var(--surface); box-shadow: var(--sh-sm); } ._formCard_23hir_477 { padding: var(--space-4); } /* ========================================================= SECTION TITLE ========================================================= */ ._sectionTitle_23hir_523 { margin: 0 0 var(--space-3); color: var(--ink); font-family: var(--font); font-size: var(--font-size-lg); line-height: 1.3; font-weight: var(--font-weight-bold); } /* ========================================================= HIDDEN INPUT ========================================================= */ ._hiddenInput_23hir_553 { display: none; } /* ========================================================= UPLOAD AREA ========================================================= */ ._uploadArea_23hir_569 { width: 100%; min-height: 178px; display: flex; flex-direction: column; align-items: center; justify-content: center; gap: var(--space-2); padding: var(--space-4); border: 1px dashed #aec3e1; border-radius: var(--radius-md); background: linear-gradient( 180deg, rgba(248, 250, 255, 0.6), rgba(255, 255, 255, 0.96) ); text-align: center; transition: border-color var(--transition-fast), background var(--transition-fast), box-shadow var(--transition-fast); } ._uploadArea_23hir_569:hover { border-color: #8eafe0; } ._uploadAreaActive_23hir_639 { border-color: var(--brand); background: var(--brand-soft); box-shadow: 0 0 0 3px rgba(8, 102, 255, 0.06); } /* ========================================================= UPLOAD ICON ========================================================= */ ._uploadIcon_23hir_665 { width: 40px; height: 40px; margin-bottom: var(--space-1); color: #344d7b; stroke-width: 1.5; } /* ========================================================= UPLOAD TITLE ========================================================= */ ._uploadTitle_23hir_695 { margin: 0; color: #334a78; font-family: var(--font); font-size: var(--font-size-base); line-height: 1.4; font-weight: var(--font-weight-normal); } /* ========================================================= BROWSE BUTTON ========================================================= */ ._browseButton_23hir_725 { min-width: 126px; height: 36px; display: inline-flex; align-items: center; justify-content: center; margin-top: var(--space-1); padding: 0 var(--space-4); border: 1px solid var(--bad); border-radius: var(--radius-md); outline: none; color: var(--bad); background: var(--surface); font-family: var(--font); font-size: var(--font-size-xs); font-weight: var(--font-weight-medium); cursor: pointer; transition: color var(--transition-fast), border-color var(--transition-fast), background var(--transition-fast); } ._browseButton_23hir_725:hover { color: var(--color-white); border-color: var(--bad); background: var(--bad); } /* ========================================================= UPLOAD HELP ========================================================= */ ._uploadHelp_23hir_811 { margin: var(--space-1) 0 0; display: flex; align-items: center; justify-content: center; flex-wrap: wrap; gap: var(--space-2); color: var(--ink-soft); font-family: var(--font); font-size: var(--font-size-xs); line-height: 1.4; font-weight: var(--font-weight-normal); } ._uploadHelp_23hir_811 span { color: var(--ink-muted); } /* ========================================================= ERROR MESSAGE ========================================================= */ ._errorMessage_23hir_863 { width: 100%; margin-top: var(--space-2); padding: var(--space-2) var(--space-3); border: 1px solid #ffd0d3; border-radius: var(--radius-sm); color: var(--bad); background: #fff3f4; font-family: var(--font); font-size: var(--font-size-xs); line-height: 1.4; font-weight: var(--font-weight-normal); } /* ========================================================= UPLOADED FILE ========================================================= */ ._uploadedFile_23hir_909 { width: 100%; min-width: 0; display: flex; align-items: center; justify-content: space-between; gap: var(--space-3); margin-top: var(--space-3); } /* ========================================================= UPLOADED FILE LEFT ========================================================= */ ._uploadedFileLeft_23hir_943 { min-width: 0; flex: 1; display: flex; align-items: center; gap: var(--space-3); } /* ========================================================= VIDEO PREVIEW ========================================================= */ ._videoPreview_23hir_971 { width: 112px; height: 66px; flex: 0 0 112px; overflow: hidden; border: 1px solid var(--line); border-radius: var(--radius-sm); background: #0b1735; } ._videoPreview_23hir_971 video { width: 100%; height: 100%; display: block; object-fit: cover; object-position: center; } /* ========================================================= FILE META ========================================================= */ ._fileMeta_23hir_1027 { min-width: 0; display: flex; flex-direction: column; gap: var(--space-1); } ._fileMeta_23hir_1027 strong { max-width: 280px; display: block; overflow: hidden; color: var(--ink); font-family: var(--font); font-size: var(--font-size-sm); line-height: 1.35; font-weight: var(--font-weight-medium); white-space: nowrap; text-overflow: ellipsis; } ._fileMeta_23hir_1027 > span { display: flex; align-items: center; flex-wrap: wrap; gap: var(--space-1); color: var(--ink-soft); font-family: var(--font); font-size: var(--font-size-xs); line-height: 1.3; font-weight: var(--font-weight-normal); } ._fileMeta_23hir_1027 i { color: var(--ink-muted); font-style: normal; } /* ========================================================= UPLOADED ACTIONS ========================================================= */ ._uploadedActions_23hir_1131 { flex: 0 0 auto; display: flex; align-items: center; gap: var(--space-2); } /* ========================================================= UPLOADED BADGE ========================================================= */ ._uploadedBadge_23hir_1157 { min-height: 28px; display: inline-flex; align-items: center; justify-content: center; gap: var(--space-2); padding: var(--space-1) var(--space-3); border-radius: var(--radius-md); color: #07824a; background: #eaf9f1; font-family: var(--font); font-size: var(--font-size-xs); line-height: 1; font-weight: var(--font-weight-medium); white-space: nowrap; } ._uploadedBadge_23hir_1157 > span { width: 7px; height: 7px; flex: 0 0 7px; border-radius: var(--radius-full); background: var(--ok); } /* ========================================================= REPLACE BUTTON ========================================================= */ ._replaceButton_23hir_1235 { min-width: 88px; height: 32px; display: inline-flex; align-items: center; justify-content: center; gap: var(--space-2); padding: 0 var(--space-3); border: 1px solid var(--border-default); border-radius: var(--radius-md); outline: none; color: var(--ink); background: var(--surface); font-family: var(--font); font-size: var(--font-size-xs); font-weight: var(--font-weight-medium); cursor: pointer; transition: color var(--transition-fast), border-color var(--transition-fast), background var(--transition-fast); } ._replaceButton_23hir_1235 svg { width: var(--font-size-sm); height: var(--font-size-sm); } ._replaceButton_23hir_1235:hover { color: var(--brand); border-color: #b6cff2; background: var(--brand-soft); } /* ========================================================= DELETE FILE ========================================================= */ ._deleteFileButton_23hir_1333 { width: 32px; height: 32px; flex: 0 0 32px; display: inline-flex; align-items: center; justify-content: center; padding: 0; border: 1px solid #ffd1d3; border-radius: var(--radius-md); outline: none; color: var(--bad); background: var(--surface); cursor: pointer; transition: color var(--transition-fast), border-color var(--transition-fast), background var(--transition-fast); } ._deleteFileButton_23hir_1333 svg { width: var(--font-size-base); height: var(--font-size-base); } ._deleteFileButton_23hir_1333:hover { color: #df2029; border-color: #ffafb4; background: #fff2f3; } /* ========================================================= FIELD LABEL ========================================================= */ ._fieldLabel_23hir_1423 { display: block; margin: 0 0 var(--space-2); color: #42577d; font-family: var(--font); font-size: var(--font-size-xs); line-height: 1.3; font-weight: var(--font-weight-medium); } /* ========================================================= DURATION CONTROLS ========================================================= */ ._durationControls_23hir_1457 { width: 100%; min-width: 0; display: flex; align-items: center; gap: var(--space-3); } /* ========================================================= DURATION INPUT WRAPPER ========================================================= */ ._durationInputWrap_23hir_1485 { width: 250px; height: 40px; flex: 0 0 250px; display: grid; grid-template-columns: minmax(0, 1fr) 82px; overflow: hidden; border: 1px solid var(--border-default); border-radius: var(--radius-md); background: var(--surface); transition: border-color var(--transition-fast), box-shadow var(--transition-fast); } ._durationInputWrap_23hir_1485:focus-within { border-color: var(--brand); box-shadow: 0 0 0 2px rgba(8, 102, 255, 0.06); } /* ========================================================= DURATION INPUT ========================================================= */ ._durationInputWrap_23hir_1485 input { width: 100%; min-width: 0; height: 100%; margin: 0; padding: 0 var(--space-3); border: 0; outline: 0; color: var(--ink); background: transparent; font-family: var(--font); font-size: var(--font-size-sm); font-weight: var(--font-weight-medium); } /* ========================================================= SECONDS SUFFIX ========================================================= */ ._durationInputWrap_23hir_1485 > span { display: flex; align-items: center; justify-content: center; border-left: 1px solid var(--line); color: var(--ink-soft); background: var(--surface-muted); font-family: var(--font); font-size: var(--font-size-xs); font-weight: var(--font-weight-normal); } /* ========================================================= DURATION PRESETS ========================================================= */ ._durationPresets_23hir_1637 { min-width: 0; flex: 1; display: grid; grid-template-columns: repeat(4, minmax(68px, 1fr)); gap: var(--space-2); } /* ========================================================= DURATION BUTTON ========================================================= */ ._durationButton_23hir_1667 { height: 38px; padding: 0 var(--space-3); border: 1px solid var(--line); border-radius: var(--radius-md); outline: none; color: #253b66; background: var(--surface-muted); font-family: var(--font); font-size: var(--font-size-xs); font-weight: var(--font-weight-medium); white-space: nowrap; cursor: pointer; transition: color var(--transition-fast), border-color var(--transition-fast), background var(--transition-fast); } ._durationButton_23hir_1667:hover { color: var(--brand); border-color: #bcd3f6; background: var(--brand-soft); } ._durationButtonActive_23hir_1737 { color: var(--bad) !important; border-color: #ff555b !important; background: #fff7f7 !important; } /* ========================================================= FIELD HELP ========================================================= */ ._fieldHelp_23hir_1761 { margin: var(--space-2) 0 0; color: var(--ink-soft); font-family: var(--font); font-size: var(--font-size-xs); line-height: 1.4; font-weight: var(--font-weight-normal); } /* ========================================================= AI INSTRUCTIONS ========================================================= */ ._instructionsInput_23hir_1791 { width: 100%; min-height: 78px; max-height: 180px; display: block; margin: 0; padding: var(--space-3); resize: vertical; border: 1px solid var(--border-default); border-radius: var(--radius-md); outline: none; color: #253b66; background: var(--surface); font-family: var(--font); font-size: var(--font-size-xs); line-height: 1.5; font-weight: var(--font-weight-normal); transition: border-color var(--transition-fast), box-shadow var(--transition-fast); } ._instructionsInput_23hir_1791::placeholder { color: var(--ink-muted); } ._instructionsInput_23hir_1791:hover { border-color: var(--border-medium); } ._instructionsInput_23hir_1791:focus { border-color: var(--brand); box-shadow: 0 0 0 2px rgba(8, 102, 255, 0.06); } /* ========================================================= RIGHT SETTINGS CARD ========================================================= */ ._settingsCard_23hir_479 { position: sticky; top: calc(var(--header-height) + var(--space-2)); padding: var(--space-4); } /* ========================================================= SETTINGS TITLE ========================================================= */ ._settingsCard_23hir_479 > h2 { margin: 0 0 var(--space-4); color: var(--ink); font-family: var(--font); font-size: var(--font-size-lg); line-height: 1.3; font-weight: var(--font-weight-bold); } /* ========================================================= SETTINGS VIDEO ========================================================= */ ._settingsVideo_23hir_1945 { width: 100%; min-width: 0; display: flex; align-items: center; gap: var(--space-3); } /* ========================================================= SETTINGS THUMBNAIL ========================================================= */ ._settingsThumbnail_23hir_1973 { width: 112px; height: 68px; flex: 0 0 112px; overflow: hidden; border: 1px solid var(--line); border-radius: var(--radius-sm); background: #0b1735; } ._settingsThumbnail_23hir_1973 video { width: 100%; height: 100%; display: block; object-fit: cover; object-position: center; } /* ========================================================= SETTINGS PLACEHOLDER ========================================================= */ ._settingsPlaceholder_23hir_2029 { width: 100%; height: 100%; display: flex; flex-direction: column; align-items: center; justify-content: center; gap: var(--space-1); color: #c3d3ea; background: linear-gradient( 135deg, #15264e, #244c91 ); font-family: var(--font); font-size: var(--font-size-xs); font-weight: var(--font-weight-medium); } ._settingsPlaceholder_23hir_2029 svg { width: var(--font-size-2xl); height: var(--font-size-2xl); } /* ========================================================= SETTINGS VIDEO TEXT ========================================================= */ ._settingsVideoText_23hir_2097 { min-width: 0; flex: 1; display: flex; flex-direction: column; gap: var(--space-1); } ._settingsVideoText_23hir_2097 span { color: var(--ink-soft); font-family: var(--font); font-size: var(--font-size-xs); line-height: 1.3; font-weight: var(--font-weight-normal); } ._settingsVideoText_23hir_2097 strong { display: block; color: var(--ink); font-family: var(--font); font-size: var(--font-size-sm); line-height: 1.4; font-weight: var(--font-weight-semibold); } /* ========================================================= SETTINGS DIVIDER ========================================================= */ ._settingsDivider_23hir_2165 { width: 100%; height: 1px; margin: var(--space-4) 0; background: var(--line); } /* ========================================================= SETTINGS ROWS ========================================================= */ ._settingsRows_23hir_2191 { width: 100%; display: flex; flex-direction: column; gap: var(--space-4); } ._settingsRows_23hir_2191 > div { width: 100%; display: flex; align-items: center; justify-content: space-between; gap: var(--space-3); } ._settingsRows_23hir_2191 span { color: #42577d; font-family: var(--font); font-size: var(--font-size-sm); line-height: 1.3; font-weight: var(--font-weight-normal); } ._settingsRows_23hir_2191 strong { color: var(--ink); font-family: var(--font); font-size: var(--font-size-sm); line-height: 1.3; font-weight: var(--font-weight-medium); text-align: right; } /* ========================================================= AI STEPS ========================================================= */ ._aiSteps_23hir_2277 { width: 100%; display: flex; flex-direction: column; gap: var(--space-5); padding: 0; } /* ========================================================= AI STEP ========================================================= */ ._aiStep_23hir_2277 { width: 100%; display: grid; grid-template-columns: 38px minmax(0, 1fr); align-items: start; gap: var(--space-3); } /* ========================================================= STEP NUMBER ========================================================= */ ._stepNumber_23hir_2341 { width: 36px; height: 36px; display: inline-flex; align-items: center; justify-content: center; border-radius: var(--radius-full); color: var(--brand); background: #eaf3ff; font-family: var(--font); font-size: var(--font-size-sm); line-height: 1; font-weight: var(--font-weight-semibold); } ._aiStep_23hir_2277 > div { min-width: 0; padding-top: var(--space-1); } ._aiStep_23hir_2277 strong { display: block; margin: 0 0 var(--space-1); color: var(--ink); font-family: var(--font); font-size: var(--font-size-sm); line-height: 1.35; font-weight: var(--font-weight-semibold); } ._aiStep_23hir_2277 p { margin: 0; color: var(--ink-soft); font-family: var(--font); font-size: var(--font-size-xs); line-height: 1.45; font-weight: var(--font-weight-normal); } /* ========================================================= INFO BOX ========================================================= */ ._infoBox_23hir_2447 { width: 100%; display: flex; align-items: flex-start; gap: var(--space-2); margin-top: var(--space-5); padding: var(--space-3); border: 1px solid #cfe1fb; border-radius: var(--radius-md); color: #253b66; background: #f3f8ff; font-family: var(--font); font-size: var(--font-size-xs); line-height: 1.45; font-weight: var(--font-weight-normal); } ._infoBox_23hir_2447 svg { width: var(--font-size-lg); height: var(--font-size-lg); flex: 0 0 var(--font-size-lg); margin-top: 1px; color: var(--brand); } /* ========================================================= BOTTOM ACTION BAR ========================================================= */ ._actionBar_23hir_2523 { width: 100%; min-width: 0; display: flex; align-items: center; justify-content: space-between; gap: var(--space-4); margin: var(--space-3) 0 0; padding: var(--space-3) var(--space-4); border: 1px solid var(--line); border-radius: var(--radius-lg); background: var(--surface); box-shadow: var(--sh-sm); } /* ========================================================= READY STATUS ========================================================= */ ._readyStatus_23hir_2579 { min-width: 0; display: flex; align-items: center; flex-wrap: wrap; gap: var(--space-2); color: #314970; font-family: var(--font); font-size: var(--font-size-xs); line-height: 1.4; font-weight: var(--font-weight-normal); } ._readyStatus_23hir_2579 i { color: var(--ink-muted); font-style: normal; } /* ========================================================= READY DOT ========================================================= */ ._readyDot_23hir_2633, ._waitingDot_23hir_2635 { width: 9px; height: 9px; flex: 0 0 9px; border-radius: var(--radius-full); } ._readyDot_23hir_2633 { background: var(--ok); box-shadow: 0 0 0 4px rgba(16, 185, 129, 0.12); } ._waitingDot_23hir_2635 { background: #94a3b8; box-shadow: 0 0 0 4px rgba(148, 163, 184, 0.12); } /* ========================================================= FOOTER BUTTON GROUP ========================================================= */ ._footerActions_23hir_2693 { flex: 0 0 auto; display: flex; align-items: center; gap: var(--space-2); } /* ========================================================= CANCEL BUTTON ========================================================= */ ._cancelButton_23hir_2719 { min-width: 108px; height: 40px; padding: 0 var(--space-4); border: 1px solid var(--border-default); border-radius: var(--radius-md); outline: none; color: var(--ink); background: var(--surface); font-family: var(--font); font-size: var(--font-size-xs); font-weight: var(--font-weight-medium); cursor: pointer; transition: color var(--transition-fast), border-color var(--transition-fast), background var(--transition-fast); } ._cancelButton_23hir_2719:hover:not(:disabled) { color: var(--brand); border-color: #b2cbef; background: var(--brand-soft); } /* ========================================================= CONVERT BUTTON ========================================================= */ ._convertButton_23hir_2795 { min-width: 152px; height: 40px; padding: 0 var(--space-4); display: inline-flex; align-items: center; justify-content: center; gap: var(--space-2); border: 1px solid #ff5159; border-radius: var(--radius-md); outline: none; color: var(--color-white); background: linear-gradient( 135deg, #ff676c, #ff454d ); font-family: var(--font); font-size: var(--font-size-sm); line-height: 1; font-weight: var(--font-weight-semibold); cursor: pointer; box-shadow: 0 4px 10px rgba(255, 69, 77, 0.15); transition: opacity var(--transition-fast), transform var(--transition-fast), box-shadow var(--transition-fast); } ._convertButton_23hir_2795 svg { width: var(--font-size-lg); height: var(--font-size-lg); } ._convertButton_23hir_2795:hover:not(:disabled) { transform: translateY(-1px); box-shadow: 0 6px 14px rgba(255, 69, 77, 0.2); } ._convertButton_23hir_2795:disabled, ._cancelButton_23hir_2719:disabled { opacity: 0.55; cursor: not-allowed; transform: none; } /* ========================================================= SPINNER ========================================================= */ ._spin_23hir_2933 { animation: _aiVideoSummarySpin_23hir_1 0.8s linear infinite; } @keyframes _aiVideoSummarySpin_23hir_1 { from { transform: rotate(0deg); } to { transform: rotate(360deg); } } /* ========================================================= 1440+ DESKTOP ========================================================= */ @media (min-width: 1440px) { ._createPage_23hir_19 { padding: var(--space-3) var(--space-3) var(--space-5); } ._createGrid_23hir_399 { grid-template-columns: minmax(0, 2fr) minmax(320px, 0.95fr); } } /* ========================================================= LAPTOP ========================================================= */ @media (max-width: 1280px) { ._createPage_23hir_19 { padding: var(--space-2) var(--space-2) var(--space-4); } ._createHeading_23hir_209 h1 { font-size: calc(var(--font-size-2xl) + 4px); } ._createGrid_23hir_399 { grid-template-columns: minmax(0, 1.7fr) minmax(280px, 0.82fr); gap: var(--space-2); } ._formCard_23hir_477 { padding: var(--space-3); } ._settingsCard_23hir_479 { padding: var(--space-3); } ._uploadArea_23hir_569 { min-height: 165px; } ._durationControls_23hir_1457 { align-items: stretch; flex-direction: column; gap: var(--space-2); } ._durationInputWrap_23hir_1485 { width: 100%; max-width: 280px; flex: none; } ._durationPresets_23hir_1637 { width: 100%; } } /* ========================================================= TABLET ========================================================= */ @media (max-width: 991px) { ._createPage_23hir_19 { padding: var(--space-2) var(--space-2) var(--space-4); } ._createHeader_23hir_181 { margin-bottom: var(--space-3); } ._createHeading_23hir_209 h1 { font-size: calc(var(--font-size-2xl) + 2px); } ._createGrid_23hir_399 { grid-template-columns: 1fr; gap: var(--space-3); } ._settingsCard_23hir_479 { position: static; } ._settingsVideo_23hir_1945 { max-width: 430px; } ._actionBar_23hir_2523 { align-items: flex-start; flex-direction: column; } ._footerActions_23hir_2693 { width: 100%; justify-content: flex-end; } } /* ========================================================= MOBILE ========================================================= */ @media (max-width: 767px) { ._createPage_23hir_19 { padding: var(--space-2) var(--space-1) var(--space-3); } ._breadcrumb_23hir_73 { margin-bottom: var(--space-2); } ._createHeader_23hir_181 { flex-direction: column; gap: var(--space-3); margin-bottom: var(--space-3); } ._createHeading_23hir_209 h1 { font-size: var(--font-size-2xl); } ._createHeading_23hir_209 p { font-size: var(--font-size-sm); } ._backButton_23hir_287 { width: 100%; min-width: 0; } ._formCard_23hir_477, ._settingsCard_23hir_479 { padding: var(--space-3); } ._sectionTitle_23hir_523, ._settingsCard_23hir_479 > h2 { font-size: var(--font-size-lg); } ._uploadArea_23hir_569 { min-height: 155px; padding: var(--space-3); } ._uploadIcon_23hir_665 { width: 34px; height: 34px; } ._uploadedFile_23hir_909 { align-items: stretch; flex-direction: column; gap: var(--space-2); } ._uploadedFileLeft_23hir_943 { width: 100%; } ._uploadedActions_23hir_1131 { width: 100%; justify-content: flex-end; } ._videoPreview_23hir_971 { width: 94px; height: 58px; flex-basis: 94px; } ._durationInputWrap_23hir_1485 { width: 100%; max-width: none; } ._durationPresets_23hir_1637 { grid-template-columns: repeat(2, minmax(0, 1fr)); } ._settingsVideo_23hir_1945 { align-items: flex-start; } ._settingsThumbnail_23hir_1973 { width: 100px; height: 62px; flex-basis: 100px; } ._actionBar_23hir_2523 { padding: var(--space-3); } ._footerActions_23hir_2693 { width: 100%; } ._cancelButton_23hir_2719, ._convertButton_23hir_2795 { flex: 1; min-width: 0; } } /* ========================================================= SMALL MOBILE ========================================================= */ @media (max-width: 480px) { ._createPage_23hir_19 { padding: var(--space-1) var(--space-1) var(--space-3); } ._createHeading_23hir_209 h1 { font-size: var(--font-size-xl); } ._uploadedFileLeft_23hir_943 { align-items: flex-start; } ._fileMeta_23hir_1027 strong { max-width: 160px; } ._uploadedActions_23hir_1131 { align-items: stretch; flex-direction: column; } ._uploadedBadge_23hir_1157, ._replaceButton_23hir_1235, ._deleteFileButton_23hir_1333 { width: 100%; } ._deleteFileButton_23hir_1333 { flex-basis: auto; } ._settingsVideo_23hir_1945 { flex-direction: column; } ._settingsThumbnail_23hir_1973 { width: 100%; height: 145px; flex-basis: auto; } ._settingsRows_23hir_2191 > div { align-items: flex-start; flex-direction: column; gap: var(--space-1); } ._settingsRows_23hir_2191 strong { text-align: left; } ._aiStep_23hir_2277 { grid-template-columns: 34px minmax(0, 1fr); gap: var(--space-2); } ._stepNumber_23hir_2341 { width: 32px; height: 32px; font-size: var(--font-size-xs); } ._footerActions_23hir_2693 { flex-direction: column; } ._cancelButton_23hir_2719, ._convertButton_23hir_2795 { width: 100%; } }/* ========================================================= AI VIDEO SUMMARY - VIEW PAGE COMPACT VERSION Uses global.css font / colors / spacing ========================================================= */ /* ========================================================= PAGE ========================================================= */ ._viewPage_mn4uh_21 { width: 100%; min-width: 0; margin: 0; /* very small space after sidebar */ padding: var(--space-2) var(--space-2) var(--space-4); box-sizing: border-box; color: var(--ink); background: var(--bg); font-family: var(--font); font-size: var(--font-size-base); font-weight: var(--font-weight-normal); } ._viewPage_mn4uh_21 *, ._viewPage_mn4uh_21 *::before, ._viewPage_mn4uh_21 *::after { box-sizing: border-box; } /* ========================================================= BREADCRUMB ========================================================= */ ._viewBreadcrumb_mn4uh_85 { width: 100%; display: flex; align-items: center; gap: var(--space-2); margin: 0 0 var(--space-2); padding: 0; color: var(--ink-soft); font-family: var(--font); font-size: var(--font-size-xs); line-height: 1.35; font-weight: var(--font-weight-normal); } ._viewBreadcrumb_mn4uh_85 button { margin: 0; padding: 0; border: 0; outline: none; color: var(--ink-soft); background: transparent; font-family: var(--font); font-size: inherit; font-weight: inherit; cursor: pointer; transition: color var(--transition-fast); } ._viewBreadcrumb_mn4uh_85 button:hover { color: var(--brand); } ._viewBreadcrumb_mn4uh_85 > span:nth-child(2) { color: var(--ink-muted); } ._viewBreadcrumb_mn4uh_85 > span:last-child { color: var(--ink); } /* ========================================================= HEADER ========================================================= */ ._viewHeader_mn4uh_205 { width: 100%; min-width: 0; display: flex; align-items: flex-start; justify-content: space-between; gap: var(--space-4); margin: 0 0 var(--space-3); padding: 0; } /* ========================================================= HEADING ========================================================= */ ._viewHeading_mn4uh_249 { min-width: 0; flex: 1; } ._viewHeadingRow_mn4uh_259 { display: flex; align-items: center; flex-wrap: wrap; gap: var(--space-3); } ._viewHeadingRow_mn4uh_259 h1 { margin: 0; color: var(--ink); font-family: var(--font); font-size: calc( var(--font-size-2xl) + 5px ); line-height: 1.15; font-weight: var(--font-weight-bold); letter-spacing: -0.4px; } ._viewHeading_mn4uh_249 > p { margin: var(--space-1) 0 0; color: var(--ink-soft); font-family: var(--font); font-size: var(--font-size-sm); line-height: 1.4; font-weight: var(--font-weight-normal); } /* ========================================================= STATUS BADGE ========================================================= */ ._viewStatusBadge_mn4uh_347 { min-height: 27px; display: inline-flex; align-items: center; justify-content: center; gap: var(--space-2); padding: var(--space-1) var(--space-3); border-radius: var(--radius-md); color: var(--ink-soft); background: var(--surface-muted); font-family: var(--font); font-size: var(--font-size-xs); line-height: 1; font-weight: var(--font-weight-medium); white-space: nowrap; } ._viewStatusCompleted_mn4uh_399 { color: #078347; background: #e9f9f0; } ._viewStatusDot_mn4uh_409 { width: 7px; height: 7px; flex: 0 0 7px; border-radius: var(--radius-full); background: currentColor; } /* ========================================================= HEADER ACTIONS ========================================================= */ ._viewHeaderActions_mn4uh_439 { flex: 0 0 auto; display: flex; align-items: center; gap: var(--space-2); } /* ========================================================= BACK BUTTON ========================================================= */ ._viewBackButton_mn4uh_465 { min-width: 112px; height: 36px; padding: 0 var(--space-3); display: inline-flex; align-items: center; justify-content: center; gap: var(--space-2); border: 1px solid var(--border-default); border-radius: var(--radius-md); outline: none; color: var(--ink); background: var(--surface); font-family: var(--font); font-size: var(--font-size-xs); font-weight: var(--font-weight-medium); cursor: pointer; transition: color var(--transition-fast), border-color var(--transition-fast), background var(--transition-fast); } ._viewBackButton_mn4uh_465 svg { width: var(--font-size-base); height: var(--font-size-base); } ._viewBackButton_mn4uh_465:hover { color: var(--brand); border-color: #b8cff0; background: var(--brand-soft); } /* ========================================================= DOWNLOAD BUTTON ========================================================= */ ._viewDownloadButton_mn4uh_567 { min-width: 142px; height: 36px; padding: 0 var(--space-3); display: inline-flex; align-items: center; justify-content: center; gap: var(--space-2); border: 1px solid #ff5158; border-radius: var(--radius-md); outline: none; color: var(--color-white); background: linear-gradient( 135deg, #ff676c 0%, #ff454d 100% ); font-family: var(--font); font-size: var(--font-size-xs); font-weight: var(--font-weight-semibold); cursor: pointer; box-shadow: 0 3px 8px rgba(255, 69, 77, 0.14); transition: transform var(--transition-fast), box-shadow var(--transition-fast); } ._viewDownloadButton_mn4uh_567 svg { width: var(--font-size-md); height: var(--font-size-md); } ._viewDownloadButton_mn4uh_567:hover { transform: translateY(-1px); box-shadow: 0 5px 12px rgba(255, 69, 77, 0.2); } /* ========================================================= MAIN GRID ========================================================= */ ._viewGrid_mn4uh_687 { width: 100%; min-width: 0; display: grid; grid-template-columns: minmax(0, 1.9fr) minmax(285px, 0.9fr); align-items: start; gap: var(--space-2); margin: 0; padding: 0; } /* ========================================================= COLUMNS ========================================================= */ ._viewLeft_mn4uh_731, ._viewRight_mn4uh_733 { width: 100%; min-width: 0; display: flex; flex-direction: column; gap: var(--space-2); } /* ========================================================= CARD ========================================================= */ ._viewCard_mn4uh_761 { width: 100%; min-width: 0; margin: 0; padding: var(--space-3); border: 1px solid var(--line); border-radius: var(--radius-lg); background: var(--surface); box-shadow: var(--sh-sm); } /* ========================================================= CARD TITLE ========================================================= */ ._viewCardTitle_mn4uh_801 { margin: 0 0 var(--space-2); color: var(--ink); font-family: var(--font); font-size: var(--font-size-lg); line-height: 1.3; font-weight: var(--font-weight-bold); } /* ========================================================= SUMMARY VIDEO REDUCED HEIGHT ========================================================= */ ._summaryVideoWrap_mn4uh_839 { position: relative; width: 100%; /* Main reduction. Keeps wide video but prevents huge height. */ height: clamp( 235px, 27vw, 330px ); max-height: 330px; overflow: hidden; border-radius: var(--radius-md); background: #061229; } /* ========================================================= REAL VIDEO ========================================================= */ ._summaryVideoWrap_mn4uh_839 > video { width: 100%; height: 100%; display: block; object-fit: contain; object-position: center; background: #000000; } /* ========================================================= FALLBACK VIDEO ========================================================= */ ._summaryVideoFallback_mn4uh_927 { position: relative; width: 100%; height: 100%; display: flex; align-items: center; overflow: hidden; padding: var(--space-6) var(--space-8); background: radial-gradient( circle at 72% 50%, rgba(50, 122, 238, 0.4), transparent 29% ), linear-gradient( 115deg, #0c347e 0%, #145dc1 58%, #071327 100% ); } /* ========================================================= FALLBACK DECORATION ========================================================= */ ._summaryVideoFallback_mn4uh_927::after { content: ""; position: absolute; right: 6%; bottom: -44%; width: 32%; height: 112%; border-radius: 50% 50% 10% 10%; opacity: 0.5; background: linear-gradient( 180deg, #8793ac 0%, #243653 100% ); } /* ========================================================= FALLBACK TEXT ========================================================= */ ._fallbackContent_mn4uh_1055 { position: relative; z-index: 2; min-width: 0; max-width: 52%; display: flex; flex-direction: column; gap: var(--space-2); } ._fallbackContent_mn4uh_1055 span { color: var(--color-white); font-family: var(--font); font-size: calc( var(--font-size-2xl) + 9px ); line-height: 1.1; font-weight: var(--font-weight-bold); letter-spacing: -0.4px; } ._fallbackContent_mn4uh_1055 strong { color: #eef5ff; font-family: var(--font); font-size: calc( var(--font-size-lg) + 5px ); line-height: 1.2; font-weight: var(--font-weight-semibold); } /* ========================================================= BIG PLAY BUTTON REDUCED SIZE ========================================================= */ ._bigPlayButton_mn4uh_1153 { position: absolute; top: 50%; left: 50%; z-index: 5; width: 58px; height: 58px; display: inline-flex; align-items: center; justify-content: center; padding: 0; border: 0; border-radius: var(--radius-full); outline: none; color: var(--color-white); background: rgba(3, 49, 111, 0.9); box-shadow: 0 6px 18px rgba(0, 0, 0, 0.18); cursor: pointer; transform: translate(-50%, -50%); transition: transform var(--transition-fast), background var(--transition-fast); } ._bigPlayButton_mn4uh_1153 svg { width: var(--font-size-2xl); height: var(--font-size-2xl); margin-left: var(--space-1); fill: currentColor; } ._bigPlayButton_mn4uh_1153:hover { background: rgba(8, 102, 255, 0.95); transform: translate(-50%, -50%) scale(1.04); } /* ========================================================= SUMMARY FILE ROW ========================================================= */ ._summaryFileRow_mn4uh_1279 { width: 100%; min-width: 0; display: flex; align-items: center; justify-content: space-between; gap: var(--space-3); padding-top: var(--space-3); } /* ========================================================= FILE INFO ========================================================= */ ._summaryFileInfo_mn4uh_1313 { min-width: 0; display: flex; flex-direction: column; gap: var(--space-1); } ._summaryFileInfo_mn4uh_1313 strong { display: block; max-width: 100%; overflow: hidden; color: var(--ink); font-family: var(--font); font-size: var(--font-size-sm); line-height: 1.3; font-weight: var(--font-weight-semibold); white-space: nowrap; text-overflow: ellipsis; } ._summaryFileInfo_mn4uh_1313 span { display: flex; align-items: center; flex-wrap: wrap; gap: var(--space-2); color: var(--ink-soft); font-family: var(--font); font-size: var(--font-size-xs); line-height: 1.3; } ._summaryFileInfo_mn4uh_1313 i { color: var(--ink-muted); font-style: normal; } /* ========================================================= READY BADGE ========================================================= */ ._readyBadge_mn4uh_1415 { min-height: 27px; flex: 0 0 auto; display: inline-flex; align-items: center; justify-content: center; gap: var(--space-2); padding: var(--space-1) var(--space-3); border-radius: var(--radius-md); color: #078347; background: #e9f9f0; font-family: var(--font); font-size: var(--font-size-xs); font-weight: var(--font-weight-medium); white-space: nowrap; } ._readyBadge_mn4uh_1415 > span { width: 7px; height: 7px; flex: 0 0 7px; border-radius: var(--radius-full); background: currentColor; } /* ========================================================= DURATION STATS ========================================================= */ ._durationStats_mn4uh_1499 { width: 100%; display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: var(--space-2); margin-top: var(--space-3); } /* ========================================================= DURATION STAT CARD ========================================================= */ ._durationStat_mn4uh_1499 { min-width: 0; min-height: 58px; display: flex; align-items: center; gap: var(--space-2); padding: var(--space-2) var(--space-3); border: 1px solid var(--line); border-radius: var(--radius-md); background: #fbfcff; } /* ========================================================= DURATION ICON ========================================================= */ ._durationStatIcon_mn4uh_1579 { width: 30px; height: 30px; flex: 0 0 30px; display: inline-flex; align-items: center; justify-content: center; color: #071760; } ._durationStatIcon_mn4uh_1579 svg { width: var(--font-size-xl); height: var(--font-size-xl); } /* ========================================================= DURATION CONTENT ========================================================= */ ._durationStat_mn4uh_1499 > div:last-child { min-width: 0; display: flex; flex-direction: column; gap: var(--space-1); } ._durationStat_mn4uh_1499 span { color: var(--ink-soft); font-family: var(--font); font-size: var(--font-size-xs); line-height: 1.25; font-weight: var(--font-weight-normal); } ._durationStat_mn4uh_1499 strong { color: #071760; font-family: var(--font); font-size: var(--font-size-base); line-height: 1.2; font-weight: var(--font-weight-semibold); } /* ========================================================= AI INSTRUCTIONS ========================================================= */ ._instructionsView_mn4uh_1685 { width: 100%; min-height: 64px; padding: var(--space-3); border: 1px solid var(--border-default); border-radius: var(--radius-md); color: #304977; background: var(--surface); font-family: var(--font); font-size: var(--font-size-xs); line-height: 1.5; font-weight: var(--font-weight-normal); } /* ========================================================= SOURCE CARD ========================================================= */ ._sourceCard_mn4uh_1731 { padding: var(--space-3); } /* ========================================================= SOURCE VIDEO INFORMATION ========================================================= */ ._sourceVideoInfo_mn4uh_1747 { width: 100%; min-width: 0; display: flex; align-items: center; gap: var(--space-3); } /* ========================================================= SOURCE THUMBNAIL ========================================================= */ ._sourceThumbnail_mn4uh_1775 { width: 106px; height: 64px; flex: 0 0 106px; overflow: hidden; border: 1px solid var(--line); border-radius: var(--radius-md); background: #0b1735; } ._sourceThumbnail_mn4uh_1775 img { width: 100%; height: 100%; display: block; object-fit: cover; object-position: center; } /* ========================================================= SOURCE FALLBACK ========================================================= */ ._sourceFallback_mn4uh_1831 { width: 100%; height: 100%; display: flex; flex-direction: column; justify-content: center; gap: 2px; padding: var(--space-2); color: var(--color-white); background: linear-gradient( 135deg, #0c337d, #1566cf ); font-family: var(--font); } ._sourceFallback_mn4uh_1831 span { font-size: var(--font-size-xs); line-height: 1.15; font-weight: var(--font-weight-medium); } ._sourceFallback_mn4uh_1831 strong { font-size: var(--font-size-xs); line-height: 1.15; font-weight: var(--font-weight-bold); } /* ========================================================= SOURCE META ========================================================= */ ._sourceMeta_mn4uh_1911 { min-width: 0; flex: 1; display: flex; flex-direction: column; gap: var(--space-1); } ._sourceMeta_mn4uh_1911 strong { display: block; max-width: 100%; overflow: hidden; color: var(--ink); font-family: var(--font); font-size: var(--font-size-xs); line-height: 1.35; font-weight: var(--font-weight-medium); white-space: nowrap; text-overflow: ellipsis; } ._sourceMeta_mn4uh_1911 span { display: flex; align-items: center; flex-wrap: wrap; gap: var(--space-1); color: var(--ink-soft); font-family: var(--font); font-size: var(--font-size-xs); line-height: 1.3; } ._sourceMeta_mn4uh_1911 i { color: var(--ink-muted); font-style: normal; } /* ========================================================= SOURCE PLAYER ========================================================= */ ._sourcePlayer_mn4uh_2015 { width: 100%; margin-top: var(--space-3); overflow: hidden; border-radius: var(--radius-md); background: #000000; } ._sourcePlayer_mn4uh_2015 video { width: 100%; display: block; aspect-ratio: 16 / 9; object-fit: contain; } /* ========================================================= PREVIEW ORIGINAL BUTTON ========================================================= */ ._previewOriginalButton_mn4uh_2067 { width: 100%; height: 36px; margin-top: var(--space-3); display: inline-flex; align-items: center; justify-content: center; gap: var(--space-2); border: 1px solid var(--border-default); border-radius: var(--radius-md); outline: none; color: #071760; background: var(--surface); font-family: var(--font); font-size: var(--font-size-xs); font-weight: var(--font-weight-medium); cursor: pointer; transition: color var(--transition-fast), border-color var(--transition-fast), background var(--transition-fast); } ._previewOriginalButton_mn4uh_2067 svg { width: var(--font-size-base); height: var(--font-size-base); } ._previewOriginalButton_mn4uh_2067:hover:not(:disabled) { color: var(--brand); border-color: #b8cff0; background: var(--brand-soft); } ._previewOriginalButton_mn4uh_2067:disabled { opacity: 0.5; cursor: not-allowed; } /* ========================================================= DETAILS CARD ========================================================= */ ._detailsCard_mn4uh_2177 { min-height: 250px; padding: var(--space-3); } /* ========================================================= DETAIL ROWS ========================================================= */ ._detailRows_mn4uh_2197 { width: 100%; display: flex; flex-direction: column; } ._detailRow_mn4uh_2197 { min-height: 46px; display: grid; grid-template-columns: 95px minmax(0, 1fr); align-items: center; gap: var(--space-3); border-bottom: 1px solid var(--line); } ._detailRow_mn4uh_2197:last-child { border-bottom: 0; } /* ========================================================= DETAIL LABEL ========================================================= */ ._detailRow_mn4uh_2197 > span:first-child { color: var(--ink-soft); font-family: var(--font); font-size: var(--font-size-xs); line-height: 1.3; font-weight: var(--font-weight-normal); } /* ========================================================= DETAIL VALUE ========================================================= */ ._detailRow_mn4uh_2197 > strong { color: var(--ink); font-family: var(--font); font-size: var(--font-size-xs); line-height: 1.35; font-weight: var(--font-weight-medium); } /* ========================================================= DETAIL STATUS ========================================================= */ ._detailStatus_mn4uh_2311 { display: inline-flex; align-items: center; gap: var(--space-2); color: #078347; font-family: var(--font); font-size: var(--font-size-xs); line-height: 1.3; font-weight: var(--font-weight-medium); } ._detailStatus_mn4uh_2311 svg { width: var(--font-size-sm); height: var(--font-size-sm); } /* ========================================================= CREATE ANOTHER CARD ========================================================= */ ._createAnotherCard_mn4uh_2357 { padding: var(--space-3); } /* ========================================================= CREATE ANOTHER BUTTON ========================================================= */ ._createAnotherButton_mn4uh_2373 { width: 100%; height: 54px; display: inline-flex; align-items: center; justify-content: center; gap: var(--space-2); padding: 0 var(--space-3); border: 1px solid #afc8ee; border-radius: var(--radius-md); outline: none; color: #071760; background: var(--surface); font-family: var(--font); font-size: var(--font-size-sm); line-height: 1; font-weight: var(--font-weight-medium); cursor: pointer; transition: color var(--transition-fast), border-color var(--transition-fast), background var(--transition-fast), box-shadow var(--transition-fast); } ._createAnotherButton_mn4uh_2373 svg { width: var(--font-size-xl); height: var(--font-size-xl); } ._createAnotherButton_mn4uh_2373:hover { color: var(--brand); border-color: var(--brand); background: var(--brand-soft); box-shadow: 0 3px 8px rgba(8, 102, 255, 0.07); } /* ========================================================= LARGE DESKTOP ========================================================= */ @media (min-width: 1440px) { ._viewPage_mn4uh_21 { padding: var(--space-2) var(--space-3) var(--space-4); } ._viewGrid_mn4uh_687 { grid-template-columns: minmax(0, 1.95fr) minmax(300px, 0.9fr); } ._summaryVideoWrap_mn4uh_839 { height: 320px; max-height: 320px; } } /* ========================================================= LAPTOP ========================================================= */ @media (max-width: 1280px) { ._viewPage_mn4uh_21 { padding: var(--space-2) var(--space-1) var(--space-3); } ._viewHeader_mn4uh_205 { margin-bottom: var(--space-3); } ._viewHeadingRow_mn4uh_259 h1 { font-size: calc( var(--font-size-2xl) + 3px ); } ._viewGrid_mn4uh_687 { grid-template-columns: minmax(0, 1.7fr) minmax(270px, 0.82fr); gap: var(--space-2); } ._viewCard_mn4uh_761 { padding: var(--space-3); } ._summaryVideoWrap_mn4uh_839 { height: clamp( 220px, 26vw, 285px ); } ._sourceThumbnail_mn4uh_1775 { width: 94px; height: 58px; flex-basis: 94px; } ._detailRow_mn4uh_2197 { grid-template-columns: 82px minmax(0, 1fr); } } /* ========================================================= TABLET ========================================================= */ @media (max-width: 991px) { ._viewPage_mn4uh_21 { padding: var(--space-2) var(--space-1) var(--space-3); } ._viewGrid_mn4uh_687 { grid-template-columns: 1fr; } ._viewHeadingRow_mn4uh_259 h1 { font-size: var(--font-size-2xl); } ._summaryVideoWrap_mn4uh_839 { height: auto; max-height: none; aspect-ratio: 16 / 8.5; } ._viewRight_mn4uh_733 { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: var(--space-2); } ._createAnotherCard_mn4uh_2357 { grid-column: 1 / -1; } ._detailsCard_mn4uh_2177 { min-height: 0; } } /* ========================================================= MOBILE ========================================================= */ @media (max-width: 767px) { ._viewPage_mn4uh_21 { padding: var(--space-2) var(--space-1) var(--space-3); } ._viewBreadcrumb_mn4uh_85 { margin-bottom: var(--space-2); } ._viewHeader_mn4uh_205 { flex-direction: column; gap: var(--space-3); margin-bottom: var(--space-3); } ._viewHeadingRow_mn4uh_259 { align-items: flex-start; gap: var(--space-2); } ._viewHeadingRow_mn4uh_259 h1 { font-size: var(--font-size-xl); } ._viewHeading_mn4uh_249 > p { font-size: var(--font-size-xs); } ._viewHeaderActions_mn4uh_439 { width: 100%; } ._viewBackButton_mn4uh_465, ._viewDownloadButton_mn4uh_567 { flex: 1; min-width: 0; } ._viewCardTitle_mn4uh_801 { font-size: var(--font-size-md); } ._summaryVideoWrap_mn4uh_839 { width: 100%; height: auto; aspect-ratio: 16 / 9; } ._summaryVideoFallback_mn4uh_927 { padding: var(--space-4); } ._fallbackContent_mn4uh_1055 { max-width: 60%; } ._fallbackContent_mn4uh_1055 span { font-size: calc( var(--font-size-xl) + 2px ); } ._fallbackContent_mn4uh_1055 strong { font-size: var(--font-size-base); } ._bigPlayButton_mn4uh_1153 { width: 50px; height: 50px; } ._bigPlayButton_mn4uh_1153 svg { width: var(--font-size-xl); height: var(--font-size-xl); } ._durationStats_mn4uh_1499 { grid-template-columns: 1fr; } ._durationStat_mn4uh_1499 { min-height: 54px; } ._viewRight_mn4uh_733 { display: flex; } } /* ========================================================= SMALL MOBILE ========================================================= */ @media (max-width: 480px) { ._viewPage_mn4uh_21 { padding: var(--space-1) var(--space-1) var(--space-3); } ._viewHeaderActions_mn4uh_439 { flex-direction: column; } ._viewBackButton_mn4uh_465, ._viewDownloadButton_mn4uh_567 { width: 100%; } ._summaryFileRow_mn4uh_1279 { align-items: flex-start; flex-direction: column; } ._sourceVideoInfo_mn4uh_1747 { align-items: flex-start; } ._sourceThumbnail_mn4uh_1775 { width: 88px; height: 54px; flex-basis: 88px; } ._detailRow_mn4uh_2197 { grid-template-columns: 1fr; gap: var(--space-1); padding: var(--space-2) 0; } ._createAnotherButton_mn4uh_2373 { height: 50px; font-size: var(--font-size-xs); } }/* ============================================================ SilenceRemovalVideos.module.css Only new classes for this module. Table, page layout, ct-* and app-btn classes come from your existing global CSS. ============================================================ */ ._mutedText_167bs_13 { color: #94a3b8; font-size: 13px; } ._spinIcon_167bs_23 { animation: _srvSpin_167bs_1 1s linear infinite; } @keyframes _srvSpin_167bs_1 { to { transform: rotate(360deg); } } ._hiddenInput_167bs_43 { display: none; } /* ============================================================ TOP GRID (UPLOAD + INFO) ============================================================ */ ._topGrid_167bs_59 { display: grid; grid-template-columns: minmax(0, 1.5fr) minmax(0, 1fr); gap: 20px; margin-bottom: 22px; padding: 22px; background: #ffffff; border-radius: 14px; box-shadow: 0 1px 3px rgba(15, 23, 42, 0.06); } /* ============================================================ DROP ZONE ============================================================ */ ._dropzone_167bs_89 { display: flex; flex-direction: column; align-items: center; justify-content: center; height: 220px; padding: 24px; text-align: center; border: 1.5px dashed #93b4f5; border-radius: 14px; background: #fbfdff; transition: background 0.2s ease, border-color 0.2s ease; } ._dropzoneActive_167bs_117 { background: #eef4ff; border-color: #2563eb; } ._dropIcon_167bs_127 { font-size: 40px; color: #7ea6f7; margin-bottom: 14px; } ._dropTitle_167bs_139 { margin: 0 0 8px; font-size: 10px; font-weight: 700; color: #0f1e46; } ._dropOr_167bs_153 { margin-bottom: 14px; font-size: 13px; color: #475569; } ._dropHint_167bs_165 { margin: 14px 0 0; font-size: 12px; color: #475569; } /* ============================================================ SELECTED FILE PANEL ============================================================ */ ._filePanel_167bs_185 { display: flex; flex-direction: column; gap: 12px; width: 100%; max-width: 420px; text-align: left; } ._fileHead_167bs_203 { display: flex; align-items: center; gap: 12px; padding: 10px 12px; background: #ffffff; border: 1px solid #dbe5f5; border-radius: 10px; } ._fileIcon_167bs_223 { display: inline-flex; align-items: center; justify-content: center; width: 30px; height: 30px; border-radius: 10px; background: #e8f0ff; color: #2563eb; font-size: 20px; flex-shrink: 0; } ._fileInfo_167bs_249 { flex: 1; min-width: 0; } ._fileName_167bs_259 { font-size: 12px; font-weight: 600; color: #0f1e46; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; } ._fileSize_167bs_277 { font-size: 9px; color: #64748b; } ._fileRemove_167bs_287 { display: inline-flex; align-items: center; justify-content: center; width: 30px; height: 30px; border: none; border-radius: 8px; background: transparent; color: #64748b; font-size: 18px; cursor: pointer; } ._fileRemove_167bs_287:hover:not(:disabled) { background: #f1f5f9; color: #0f172a; } ._fileRemove_167bs_287:disabled { opacity: 0.5; cursor: not-allowed; } ._fieldLabel_167bs_335 { font-size: 11px; font-weight: 600; color: #334155; } ._textInput_167bs_347 { width: 100%; height: 32px; padding: 0 12px; border: 1px solid #d5deed; border-radius: 8px; background: #ffffff; font-size: 11px; color: #0f172a; outline: none; } ._textInput_167bs_347:focus { border-color: #2563eb; box-shadow: 0 0 0 3px rgba(37, 99, 235, 0.15); } ._textInput_167bs_347:disabled { background: #f8fafc; } ._progressWrap_167bs_389 { display: flex; flex-direction: column; gap: 6px; } ._progressTrack_167bs_401 { height: 8px; border-radius: 999px; background: #e2e8f0; overflow: hidden; } ._progressFill_167bs_415 { height: 100%; border-radius: 999px; background: #2563eb; transition: width 0.25s ease; } ._progressText_167bs_429 { font-size: 9px; color: #475569; } /* ============================================================ INFO CARD ============================================================ */ ._infoCard_167bs_447 { padding: 22px; border-radius: 14px; background: #eef4fd; height: 212px; } ._infoHead_167bs_461 { display: flex; gap: 16px; margin-bottom: 20px; } ._infoIcon_167bs_473 { display: inline-flex; align-items: center; justify-content: center; width: 30px; height: 30px; border-radius: 10px; background: #1d4ed8; color: #ffffff; font-size: 15px; flex-shrink: 0; } ._infoTitle_167bs_499 { margin: 0 0 6px; font-size: 13px; font-weight: 700; color: #0f1e46; } ._infoText_167bs_513 { margin: 0; font-size: 10px; line-height: 1.6; color: #475569; } ._checkList_167bs_527 { display: flex; flex-direction: column; gap: 14px; margin: 0; padding: 0; list-style: none; } ._checkList_167bs_527 li { display: flex; align-items: center; gap: 7px; font-size: 11px; color: #334155; } ._checkList_167bs_527 svg { font-size: 16px; color: #ffffff; background: #16a34a; border-radius: 50%; padding: 2px; flex-shrink: 0; } /* ============================================================ TABLE CELLS ============================================================ */ ._videoName_167bs_587 { font-weight: 500; color: #0f172a; } ._dateCell_167bs_597 { font-size: 13px; color: #334155; line-height: 1.5; } /* THUMB */ ._thumb_167bs_613 { position: relative; display: block; width: 96px; height: 68px; padding: 0; border: none; border-radius: 8px; background: #0f172a; overflow: hidden; cursor: pointer; } ._thumbVideo_167bs_639 { width: 100%; height: 100%; object-fit: cover; pointer-events: none; } ._thumbPlay_167bs_653 { position: absolute; top: 50%; left: 50%; display: inline-flex; align-items: center; justify-content: center; width: 26px; height: 26px; transform: translate(-50%, -50%); border-radius: 50%; background: rgba(15, 23, 42, 0.65); color: #ffffff; font-size: 12px; } ._thumb_167bs_613:hover ._thumbPlay_167bs_653 { background: rgba(37, 99, 235, 0.9); } ._thumbDuration_167bs_693 { position: absolute; right: 4px; bottom: 4px; padding: 1px 6px; border-radius: 4px; background: rgba(15, 23, 42, 0.85); color: #ffffff; font-size: 11px; font-weight: 600; } /* BADGES */ ._badge_167bs_721 { display: inline-flex; align-items: center; gap: 6px; padding: 5px 10px; border-radius: 8px; font-size: 13px; font-weight: 600; white-space: nowrap; } ._dot_167bs_743 { width: 7px; height: 7px; border-radius: 50%; background: currentColor; } ._badgeCompleted_167bs_757 { background: #dcfce7; color: #15803d; } ._badgeProcessing_167bs_767 { background: #e0ebff; color: #1d4ed8; } ._badgePending_167bs_777 { background: #fef3c7; color: #b45309; } ._badgeFailed_167bs_787 { background: #fee2e2; color: #b91c1c; } /* ACTION BUTTONS */ ._actionGroup_167bs_801 { display: flex; flex-wrap: wrap; align-items: center; gap: 8px; } ._actionBtn_167bs_815 { display: inline-flex; align-items: center; gap: 6px; height: 34px; padding: 0 12px; border: 1px solid transparent; border-radius: 7px; font-size: 13px; font-weight: 500; cursor: pointer; transition: filter 0.15s ease, opacity 0.15s ease; } ._actionBtn_167bs_815:hover:not(:disabled) { filter: brightness(0.94); } ._actionBtn_167bs_815:disabled { opacity: 0.55; cursor: not-allowed; } ._btnView_167bs_861, ._btnRetry_167bs_863 { background: #1668f5; color: #ffffff; } ._btnStatus_167bs_873 { background: #eef1f6; border-color: #d9e0eb; color: #475569; } ._btnDelete_167bs_885 { background: #ef3b4a; color: #ffffff; } /* ============================================================ GRID CARD ============================================================ */ ._gridCard_167bs_903 { display: flex; flex-direction: column; gap: 10px; padding: 14px; border: 1px solid #e2e8f0; border-radius: 12px; background: #ffffff; } ._gridThumbRow_167bs_923 { display: flex; gap: 10px; } ._gridMeta_167bs_933 { display: flex; align-items: center; justify-content: space-between; gap: 8px; } /* ============================================================ VIEW MODAL ============================================================ */ ._modalOverlay_167bs_955 { position: fixed; inset: 0; z-index: 1200; display: flex; align-items: center; justify-content: center; padding: 20px; background: rgba(15, 23, 42, 0.55); } ._modalBox_167bs_977 { display: flex; flex-direction: column; gap: 14px; width: 100%; max-width: 720px; max-height: 92vh; padding: 20px; border-radius: 14px; background: #ffffff; overflow-y: auto; } ._modalHead_167bs_1003 { display: flex; align-items: center; justify-content: space-between; gap: 12px; } ._modalTitle_167bs_1017 { margin: 0; font-size: 18px; font-weight: 700; color: #0f1e46; } ._tabs_167bs_1031 { display: flex; gap: 6px; padding: 4px; border-radius: 9px; background: #f1f5f9; width: fit-content; } ._tab_167bs_1031 { padding: 7px 14px; border: none; border-radius: 7px; background: transparent; font-size: 13px; font-weight: 600; color: #64748b; cursor: pointer; } ._tabActive_167bs_1071 { background: #ffffff; color: #1d4ed8; box-shadow: 0 1px 2px rgba(15, 23, 42, 0.1); } ._player_167bs_1083 { border-radius: 10px; background: #0f172a; overflow: hidden; } ._playerVideo_167bs_1095 { display: block; width: 100%; max-height: 60vh; } ._playerEmpty_167bs_1107 { display: flex; align-items: center; justify-content: center; min-height: 200px; padding: 20px; font-size: 14px; color: #cbd5e1; text-align: center; } ._modalMeta_167bs_1129 { display: flex; flex-wrap: wrap; align-items: center; gap: 12px; } ._errorBox_167bs_1143 { padding: 10px 12px; border-radius: 8px; background: #fef2f2; border: 1px solid #fecaca; color: #b91c1c; font-size: 13px; } ._renameRow_167bs_1161 { display: flex; gap: 10px; } /* ============================================================ RESPONSIVE ============================================================ */ @media (max-width: 992px) { ._topGrid_167bs_59 { grid-template-columns: 1fr; } } @media (max-width: 576px) { ._renameRow_167bs_1161 { flex-direction: column; } ._actionBtn_167bs_815 { flex: 1 1 auto; justify-content: center; } }/* ============================================================ AiVedioDocumnet.module.css New classes only. Table, page layout, ct-* and app-btn classes come from your existing global CSS. ============================================================ */ ._mutedText_84jj4_13 { color: #94a3b8; font-size: 13px; } ._spinIcon_84jj4_23 { animation: _avdSpin_84jj4_1 1s linear infinite; } ._pulseIcon_84jj4_31 { animation: _avdPulse_84jj4_1 1.6s ease-in-out infinite; } @keyframes _avdSpin_84jj4_1 { to { transform: rotate(360deg); } } @keyframes _avdPulse_84jj4_1 { 0%, 100% { opacity: 1; } 50% { opacity: 0.35; } } ._hiddenInput_84jj4_75 { display: none; } /* ============================================================ TOP GRID ============================================================ */ ._topGrid_84jj4_91 { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1.15fr); gap: 20px; margin-bottom: 22px; padding: 22px; background: #ffffff; border-radius: 14px; box-shadow: 0 1px 3px rgba(15, 23, 42, 0.06); } /* ============================================================ DROP ZONE ============================================================ */ ._dropzone_84jj4_121 { display: flex; flex-direction: column; align-items: center; justify-content: center; /* height: 230px; */ padding: 24px; text-align: center; border: 1.5px dashed #93b4f5; border-radius: 14px; background: #fbfdff; transition: background 0.2s ease, border-color 0.2s ease; } ._dropzoneActive_84jj4_149 { background: #eef4ff; border-color: #2563eb; } ._dropIcon_84jj4_159 { font-size: 40px; color: #7ea6f7; margin-bottom: 14px; } ._dropTitle_84jj4_171 { margin: 0 0 8px; font-size: 14px; font-weight: 700; color: #0f1e46; } ._dropOr_84jj4_185 { margin-bottom: 14px; font-size: 13px; color: #475569; } ._dropHint_84jj4_197 { margin: 14px 0 0; font-size: 12px; color: #475569; } /* SELECTED FILE PANEL */ ._filePanel_84jj4_213 { display: flex; flex-direction: column; gap: 12px; width: 100%; max-width: 420px; text-align: left; } ._fileHead_84jj4_231 { display: flex; align-items: center; gap: 12px; padding: 10px 12px; background: #ffffff; border: 1px solid #dbe5f5; border-radius: 10px; } ._fileIcon_84jj4_251 { display: inline-flex; align-items: center; justify-content: center; width: 30px; height: 30px; border-radius: 10px; background: #e8f0ff; color: #2563eb; font-size: 20px; flex-shrink: 0; } ._fileInfo_84jj4_277 { flex: 1; min-width: 0; } ._fileName_84jj4_287 { font-size: 11px; font-weight: 600; color: #0f1e46; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; } ._fileSize_84jj4_305 { font-size: 9px; color: #64748b; } ._fileRemove_84jj4_315 { display: inline-flex; align-items: center; justify-content: center; width: 30px; height: 30px; border: none; border-radius: 8px; background: transparent; color: #64748b; font-size: 18px; cursor: pointer; } ._fileRemove_84jj4_315:hover:not(:disabled) { background: #f1f5f9; color: #0f172a; } ._fileRemove_84jj4_315:disabled { opacity: 0.5; cursor: not-allowed; } ._fieldLabel_84jj4_363 { font-size: 10px; font-weight: 600; color: #334155; } ._textInput_84jj4_375 { width: 100%; height: 30px; padding: 0 12px; border: 1px solid #d5deed; border-radius: 8px; background: #ffffff; font-size: 11px; color: #0f172a; outline: none; } ._textInput_84jj4_375:focus { border-color: #2563eb; box-shadow: 0 0 0 3px rgba(37, 99, 235, 0.15); } ._textInput_84jj4_375:disabled { background: #f8fafc; } ._progressWrap_84jj4_417 { display: flex; flex-direction: column; gap: 6px; } ._progressTrack_84jj4_429 { height: 8px; border-radius: 999px; background: #e2e8f0; overflow: hidden; } ._progressFill_84jj4_443 { height: 100%; border-radius: 999px; background: #2563eb; transition: width 0.25s ease; } ._progressText_84jj4_457 { font-size: 12px; color: #475569; } /* ============================================================ LIVE PROCESS PANEL ============================================================ */ ._processCard_84jj4_475 { display: flex; flex-direction: column; justify-content: space-between; gap: 18px; padding: 22px; border-radius: 14px; background: #eef4fd; /* height: 212px; */ } ._processText_84jj4_497 { text-align: center; } ._processTitle_84jj4_505 { margin: 0 0 4px; font-size: 12px; font-weight: 700; color: #0f1e46; } ._processSub_84jj4_519 { margin: 0; font-size: 10px; color: #475569; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; } /* ============================================================ VIDEO -> DOCUMENT SCENE ============================================================ */ ._scene_84jj4_545 { display: flex; align-items: center; justify-content: center; gap: 14px; padding: 10px 0; } /* VIDEO CARD */ ._videoCard_84jj4_565 { flex-shrink: 0; width: 120px; border-radius: 12px; background: #0f172a; padding: 8px; box-shadow: 0 8px 20px rgba(15, 23, 42, 0.22); animation: _avdFloat_84jj4_1 3.2s ease-in-out infinite; } ._videoScreen_84jj4_585 { position: relative; display: flex; align-items: center; justify-content: center; height: 74px; border-radius: 7px; background: linear-gradient(135deg, #1e3a8a, #2563eb 60%, #60a5fa); overflow: hidden; } ._videoPlay_84jj4_607 { font-size: 22px; color: #ffffff; opacity: 0.95; } ._scanLine_84jj4_619 { position: absolute; left: 0; right: 0; top: 0; height: 3px; background: rgba(255, 255, 255, 0.85); box-shadow: 0 0 10px 2px rgba(255, 255, 255, 0.7); animation: _avdScan_84jj4_1 2.2s ease-in-out infinite; } ._filmStrip_84jj4_641 { display: flex; justify-content: space-between; margin-top: 7px; } ._filmStrip_84jj4_641 span { width: 10px; height: 6px; border-radius: 2px; background: #334155; } @keyframes _avdScan_84jj4_1 { 0% { top: 0; opacity: 0; } 15% { opacity: 1; } 85% { opacity: 1; } 100% { top: calc(100% - 3px); opacity: 0; } } @keyframes _avdFloat_84jj4_1 { 0%, 100% { transform: translateY(0); } 50% { transform: translateY(-4px); } } /* FLOW TRACK */ ._track_84jj4_735 { position: relative; flex: 1; min-width: 60px; max-width: 150px; height: 30px; } ._track_84jj4_735::before { content: ""; position: absolute; left: 0; right: 0; top: 50%; border-top: 2px dashed #a9c0ee; transform: translateY(-50%); } ._flowDot_84jj4_771 { position: absolute; top: 50%; left: 0; width: 14px; height: 14px; margin-top: -7px; border-radius: 4px; background: #2563eb; opacity: 0; animation: _avdFlow_84jj4_1 2.75s linear infinite; } @keyframes _avdFlow_84jj4_1 { 0% { left: 0; opacity: 0; transform: scale(1) rotate(0deg); border-radius: 4px; } 12% { opacity: 1; } 55% { transform: scale(0.85) rotate(90deg); border-radius: 50%; } 88% { opacity: 1; } 100% { left: calc(100% - 14px); opacity: 0; transform: scale(0.5) rotate(180deg); border-radius: 2px; } } /* DOCUMENT CARD */ ._docCard_84jj4_859 { position: relative; flex-shrink: 0; display: flex; flex-direction: column; gap: 8px; width: 128px; padding: 12px; border-radius: 10px; background: #ffffff; border: 1px solid #dbe5f5; box-shadow: 0 8px 20px rgba(37, 99, 235, 0.14); } ._docHead_84jj4_887 { display: flex; align-items: center; gap: 6px; margin-bottom: 2px; } ._docDot_84jj4_901 { width: 10px; height: 10px; border-radius: 3px; background: #2563eb; } ._docTitleLine_84jj4_915 { height: 6px; width: 50%; border-radius: 3px; background: #0f1e46; opacity: 0.85; } ._docLine_84jj4_931 { display: block; height: 6px; border-radius: 3px; background: #c9d7ee; transform-origin: left center; animation: _avdWrite_84jj4_1 3.9s ease-in-out infinite; } ._docCursor_84jj4_949 { position: absolute; right: 12px; bottom: 12px; width: 2px; height: 14px; background: #2563eb; animation: _avdBlink_84jj4_1 0.9s steps(1) infinite; } @keyframes _avdWrite_84jj4_1 { 0% { transform: scaleX(0); opacity: 0.4; } 35% { transform: scaleX(1); opacity: 1; } 88% { transform: scaleX(1); opacity: 1; } 100% { transform: scaleX(1); opacity: 0; } } @keyframes _avdBlink_84jj4_1 { 0%, 50% { opacity: 1; } 51%, 100% { opacity: 0; } } /* IDLE = still scene, QUEUED = video waits, no writing */ ._sceneIdle_84jj4_1043 ._videoCard_84jj4_565, ._sceneIdle_84jj4_1043 ._scanLine_84jj4_619, ._sceneIdle_84jj4_1043 ._flowDot_84jj4_771, ._sceneIdle_84jj4_1043 ._docLine_84jj4_931, ._sceneIdle_84jj4_1043 ._docCursor_84jj4_949 { animation-play-state: paused; } ._sceneIdle_84jj4_1043 ._flowDot_84jj4_771, ._sceneIdle_84jj4_1043 ._scanLine_84jj4_619, ._sceneIdle_84jj4_1043 ._docCursor_84jj4_949 { opacity: 0; } ._sceneIdle_84jj4_1043 ._docLine_84jj4_931 { transform: scaleX(1); opacity: 1; animation: none; } ._sceneQueued_84jj4_1083 ._docLine_84jj4_931 { animation: none; transform: scaleX(1); opacity: 0.45; } ._sceneQueued_84jj4_1083 ._flowDot_84jj4_771, ._sceneQueued_84jj4_1083 ._docCursor_84jj4_949 { animation: none; opacity: 0; } ._sceneQueued_84jj4_1083 ._scanLine_84jj4_619 { animation-duration: 4.5s; } ._sceneQueued_84jj4_1083 ._videoCard_84jj4_565 { animation-duration: 4.5s; } /* ============================================================ PIPELINE STEPS ============================================================ */ ._steps_84jj4_1131 { position: relative; display: flex; justify-content: space-between; margin: 0; padding: 0; list-style: none; } ._steps_84jj4_1131::before { content: ""; position: absolute; left: 12%; right: 12%; top: 10px; height: 2px; background: #cbd8ee; } ._step_84jj4_1131 { position: relative; z-index: 1; display: flex; flex-direction: column; align-items: center; gap: 6px; flex: 1; text-align: center; } ._stepDot_84jj4_1191 { display: inline-flex; align-items: center; justify-content: center; width: 22px; height: 22px; border-radius: 50%; border: 2px solid #cbd8ee; background: #eef4fd; color: #ffffff; font-size: 14px; transition: all 0.25s ease; } ._stepLabel_84jj4_1219 { font-size: 12px; color: #64748b; } ._stepDone_84jj4_1229 ._stepDot_84jj4_1191 { border-color: #16a34a; background: #16a34a; } ._stepDone_84jj4_1229 ._stepLabel_84jj4_1219 { color: #15803d; } ._stepActive_84jj4_1247 ._stepDot_84jj4_1191 { border-color: #2563eb; background: #ffffff; animation: _avdRing_84jj4_1 1.6s ease-out infinite; } ._stepActive_84jj4_1247 ._stepLabel_84jj4_1219 { color: #1d4ed8; font-weight: 600; } @keyframes _avdRing_84jj4_1 { 0% { box-shadow: 0 0 0 0 rgba(37, 99, 235, 0.45); } 100% { box-shadow: 0 0 0 9px rgba(37, 99, 235, 0); } } /* ============================================================ TABLE CELLS ============================================================ */ ._itemName_84jj4_1297 { font-weight: 500; color: #0f172a; } ._dateCell_84jj4_1307 { font-size: 13px; color: #334155; line-height: 1.5; } ._statusCell_84jj4_1319 { display: flex; flex-direction: column; gap: 6px; min-width: 120px; } ._badge_84jj4_1333 { display: inline-flex; align-items: center; align-self: flex-start; gap: 6px; padding: 5px 10px; border-radius: 8px; font-size: 13px; font-weight: 600; white-space: nowrap; } ._badgeCompleted_84jj4_1357 { background: #dcfce7; color: #15803d; } ._badgeProcessing_84jj4_1367 { background: #e0ebff; color: #1d4ed8; } ._badgePending_84jj4_1377 { background: #fef3c7; color: #b45309; } ._badgeFailed_84jj4_1387 { background: #fee2e2; color: #b91c1c; } /* MINI INDETERMINATE BAR */ ._miniBar_84jj4_1401 { position: relative; width: 100%; max-width: 120px; height: 4px; border-radius: 999px; background: #dbe5f5; overflow: hidden; } ._miniBar_84jj4_1401 span { position: absolute; top: 0; bottom: 0; left: 0; width: 40%; border-radius: 999px; background: #2563eb; animation: _avdSlide_84jj4_1 1.3s ease-in-out infinite; } ._miniBarSlow_84jj4_1443 span { background: #f59e0b; animation-duration: 2.4s; } @keyframes _avdSlide_84jj4_1 { 0% { left: -40%; } 100% { left: 100%; } } /* DOCUMENT CELL */ ._docChip_84jj4_1477 { display: inline-flex; align-items: center; gap: 6px; padding: 4px 10px; border-radius: 7px; background: #eef4ff; color: #1d4ed8; font-size: 12px; font-weight: 700; } ._writingText_84jj4_1501 { font-size: 13px; font-weight: 500; color: #1d4ed8; animation: _avdPulse_84jj4_1 1.4s ease-in-out infinite; } /* ============================================================ GRID CARD ============================================================ */ ._gridCard_84jj4_1523 { display: flex; flex-direction: column; gap: 10px; padding: 14px; border: 1px solid #e2e8f0; border-radius: 12px; background: #ffffff; } ._gridMeta_84jj4_1543 { display: flex; align-items: center; justify-content: space-between; gap: 8px; } /* ============================================================ RESPONSIVE + REDUCED MOTION ============================================================ */ @media (max-width: 992px) { ._topGrid_84jj4_91 { grid-template-columns: 1fr; } } @media (max-width: 576px) { ._videoCard_84jj4_565 { width: 96px; } ._docCard_84jj4_859 { width: 100px; } ._stepLabel_84jj4_1219 { font-size: 11px; } } @media (prefers-reduced-motion: reduce) { ._videoCard_84jj4_565, ._scanLine_84jj4_619, ._flowDot_84jj4_771, ._docLine_84jj4_931, ._docCursor_84jj4_949, ._miniBar_84jj4_1401 span, ._stepActive_84jj4_1247 ._stepDot_84jj4_1191, ._pulseIcon_84jj4_31, ._writingText_84jj4_1501 { animation: none; } ._docLine_84jj4_931 { transform: scaleX(1); opacity: 1; } ._flowDot_84jj4_771 { opacity: 1; left: 40%; } }/* ============================================================ AiVedioSDP.module.css New classes only. Table, page layout, ct-* and app-btn classes come from your existing global CSS. ============================================================ */ ._mutedText_12xvw_13 { color: #94a3b8; font-size: 13px; } ._spinIcon_12xvw_23 { animation: _avdSpin_12xvw_1 1s linear infinite; } ._pulseIcon_12xvw_31 { animation: _avdPulse_12xvw_1 1.6s ease-in-out infinite; } @keyframes _avdSpin_12xvw_1 { to { transform: rotate(360deg); } } @keyframes _avdPulse_12xvw_1 { 0%, 100% { opacity: 1; } 50% { opacity: 0.35; } } ._hiddenInput_12xvw_75 { display: none; } /* ============================================================ TOP GRID ============================================================ */ ._topGrid_12xvw_91 { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1.15fr); gap: 20px; margin-bottom: 22px; padding: 22px; background: #ffffff; border-radius: 14px; box-shadow: 0 1px 3px rgba(15, 23, 42, 0.06); } /* ============================================================ DROP ZONE ============================================================ */ ._dropzone_12xvw_121 { display: flex; flex-direction: column; align-items: center; justify-content: center; padding: 24px; text-align: center; border: 1.5px dashed #93b4f5; border-radius: 14px; background: #fbfdff; transition: background 0.2s ease, border-color 0.2s ease; } ._dropzoneActive_12xvw_147 { background: #eef4ff; border-color: #2563eb; } ._dropIcon_12xvw_157 { font-size: 40px; color: #7ea6f7; margin-bottom: 14px; } ._dropTitle_12xvw_169 { margin: 0 0 8px; font-size: 14px; font-weight: 700; color: #0f1e46; } ._dropOr_12xvw_183 { margin-bottom: 14px; font-size: 13px; color: #475569; } ._dropHint_12xvw_195 { margin: 14px 0 0; font-size: 12px; color: #475569; } /* SELECTED FILE PANEL */ ._filePanel_12xvw_211 { display: flex; flex-direction: column; gap: 12px; width: 100%; max-width: 420px; text-align: left; } ._fileHead_12xvw_229 { display: flex; align-items: center; gap: 12px; padding: 10px 12px; background: #ffffff; border: 1px solid #dbe5f5; border-radius: 10px; } ._fileIcon_12xvw_249 { display: inline-flex; align-items: center; justify-content: center; width: 30px; height: 30px; border-radius: 10px; background: #e8f0ff; color: #2563eb; font-size: 20px; flex-shrink: 0; } ._fileInfo_12xvw_275 { flex: 1; min-width: 0; } ._fileName_12xvw_285 { font-size: 11px; font-weight: 600; color: #0f1e46; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; } ._fileSize_12xvw_303 { font-size: 9px; color: #64748b; } ._fileRemove_12xvw_313 { display: inline-flex; align-items: center; justify-content: center; width: 30px; height: 30px; border: none; border-radius: 8px; background: transparent; color: #64748b; font-size: 18px; cursor: pointer; } ._fileRemove_12xvw_313:hover:not(:disabled) { background: #f1f5f9; color: #0f172a; } ._fileRemove_12xvw_313:disabled { opacity: 0.5; cursor: not-allowed; } ._fieldLabel_12xvw_361 { font-size: 10px; font-weight: 600; color: #334155; } ._textInput_12xvw_373 { width: 100%; height: 30px; padding: 0 12px; border: 1px solid #d5deed; border-radius: 8px; background: #ffffff; font-size: 11px; color: #0f172a; outline: none; } ._textInput_12xvw_373:focus { border-color: #2563eb; box-shadow: 0 0 0 3px rgba(37, 99, 235, 0.15); } ._textInput_12xvw_373:disabled { background: #f8fafc; } ._progressWrap_12xvw_415 { display: flex; flex-direction: column; gap: 6px; } ._progressTrack_12xvw_427 { height: 8px; border-radius: 999px; background: #e2e8f0; overflow: hidden; } ._progressFill_12xvw_441 { height: 100%; border-radius: 999px; background: #2563eb; transition: width 0.25s ease; } ._progressText_12xvw_455 { font-size: 12px; color: #475569; } /* ============================================================ TOGGLES (AI Convert / Silence Removal / DOCX / PDF) ============================================================ */ ._toggleGroup_12xvw_473 { display: flex; flex-wrap: wrap; gap: 18px; margin-top: 4px; padding-top: 12px; border-top: 1px dashed #e2e8f0; } ._subToggles_12xvw_491 { display: flex; flex-wrap: wrap; gap: 16px; margin-top: -2px; margin-left: 2px; padding: 10px 12px; border-left: 2px solid #93b4f5; background: #f8fafc; border-radius: 0 8px 8px 0; animation: _avdFadeIn_12xvw_1 0.2s ease; } @keyframes _avdFadeIn_12xvw_1 { from { opacity: 0; transform: translateY(-4px); } to { opacity: 1; transform: translateY(0); } } ._toggleRow_12xvw_541 { display: inline-flex; align-items: center; gap: 9px; cursor: pointer; user-select: none; } ._toggleSwitch_12xvw_557 { position: relative; display: inline-block; width: 38px; height: 21px; flex-shrink: 0; } ._toggleSwitch_12xvw_557 input { opacity: 0; width: 0; height: 0; } ._toggleSlider_12xvw_585 { position: absolute; inset: 0; background-color: #cbd5e1; transition: background-color 0.2s ease; border-radius: 999px; } ._toggleSlider_12xvw_585::before { content: ""; position: absolute; height: 15px; width: 15px; left: 3px; top: 3px; background-color: #ffffff; transition: transform 0.2s ease; border-radius: 50%; box-shadow: 0 1px 2px rgba(15, 23, 42, 0.25); } ._toggleSwitch_12xvw_557 input:checked+._toggleSlider_12xvw_585 { background-color: #2563eb; } ._toggleSwitch_12xvw_557 input:checked+._toggleSlider_12xvw_585::before { transform: translateX(17px); } ._toggleSwitch_12xvw_557 input:disabled+._toggleSlider_12xvw_585 { opacity: 0.5; cursor: not-allowed; } ._toggleSwitchSmall_12xvw_653 { width: 32px; height: 18px; } ._toggleSwitchSmall_12xvw_653 ._toggleSlider_12xvw_585::before { height: 12px; width: 12px; } ._toggleSwitchSmall_12xvw_653 input:checked+._toggleSlider_12xvw_585::before { transform: translateX(14px); } ._toggleLabel_12xvw_681 { font-size: 12px; font-weight: 600; color: #334155; } ._toggleDisabledRow_12xvw_693 { opacity: 0.55; pointer-events: none; } ._toggleHint_12xvw_703 { width: 100%; margin: 2px 0 0; font-size: 11px; color: #94a3b8; } /* ============================================================ OPTION CHIPS (table "Options" column) ============================================================ */ ._optionChips_12xvw_725 { display: flex; flex-wrap: wrap; gap: 6px; max-width: 190px; } ._optionChip_12xvw_725 { display: inline-flex; align-items: center; gap: 4px; padding: 3px 8px; border-radius: 6px; font-size: 11px; font-weight: 700; white-space: nowrap; } ._optionChipOn_12xvw_761 { background: #e0ebff; color: #1d4ed8; } ._optionChipOff_12xvw_771 { background: #f1f5f9; color: #a3b1c6; text-decoration: line-through; } /* ============================================================ LIVE PROCESS PANEL ============================================================ */ ._processCard_12xvw_791 { display: flex; flex-direction: column; justify-content: space-between; gap: 18px; padding: 22px; border-radius: 14px; background: #eef4fd; } ._processText_12xvw_811 { text-align: center; } ._processTitle_12xvw_819 { margin: 0 0 4px; font-size: 12px; font-weight: 700; color: #0f1e46; } ._processSub_12xvw_833 { margin: 0; font-size: 10px; color: #475569; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; } /* ============================================================ VIDEO -> DOCUMENT SCENE ============================================================ */ ._scene_12xvw_859 { display: flex; align-items: center; justify-content: center; gap: 14px; padding: 10px 0; } ._videoCard_12xvw_875 { flex-shrink: 0; width: 120px; border-radius: 12px; background: #0f172a; padding: 8px; box-shadow: 0 8px 20px rgba(15, 23, 42, 0.22); animation: _avdFloat_12xvw_1 3.2s ease-in-out infinite; } ._videoScreen_12xvw_895 { position: relative; display: flex; align-items: center; justify-content: center; height: 74px; border-radius: 7px; background: linear-gradient(135deg, #1e3a8a, #2563eb 60%, #60a5fa); overflow: hidden; } ._videoPlay_12xvw_917 { font-size: 22px; color: #ffffff; opacity: 0.95; } ._scanLine_12xvw_929 { position: absolute; left: 0; right: 0; top: 0; height: 3px; background: rgba(255, 255, 255, 0.85); box-shadow: 0 0 10px 2px rgba(255, 255, 255, 0.7); animation: _avdScan_12xvw_1 2.2s ease-in-out infinite; } ._filmStrip_12xvw_951 { display: flex; justify-content: space-between; margin-top: 7px; } ._filmStrip_12xvw_951 span { width: 10px; height: 6px; border-radius: 2px; background: #334155; } @keyframes _avdScan_12xvw_1 { 0% { top: 0; opacity: 0; } 15% { opacity: 1; } 85% { opacity: 1; } 100% { top: calc(100% - 3px); opacity: 0; } } @keyframes _avdFloat_12xvw_1 { 0%, 100% { transform: translateY(0); } 50% { transform: translateY(-4px); } } ._track_12xvw_1041 { position: relative; flex: 1; min-width: 60px; max-width: 150px; height: 30px; } ._track_12xvw_1041::before { content: ""; position: absolute; left: 0; right: 0; top: 50%; border-top: 2px dashed #a9c0ee; transform: translateY(-50%); } ._flowDot_12xvw_1077 { position: absolute; top: 50%; left: 0; width: 14px; height: 14px; margin-top: -7px; border-radius: 4px; background: #2563eb; opacity: 0; animation: _avdFlow_12xvw_1 2.75s linear infinite; } @keyframes _avdFlow_12xvw_1 { 0% { left: 0; opacity: 0; transform: scale(1) rotate(0deg); border-radius: 4px; } 12% { opacity: 1; } 55% { transform: scale(0.85) rotate(90deg); border-radius: 50%; } 88% { opacity: 1; } 100% { left: calc(100% - 14px); opacity: 0; transform: scale(0.5) rotate(180deg); border-radius: 2px; } } ._docCard_12xvw_1161 { position: relative; flex-shrink: 0; display: flex; flex-direction: column; gap: 8px; width: 128px; padding: 12px; border-radius: 10px; background: #ffffff; border: 1px solid #dbe5f5; box-shadow: 0 8px 20px rgba(37, 99, 235, 0.14); } ._docHead_12xvw_1189 { display: flex; align-items: center; gap: 6px; margin-bottom: 2px; } ._docDot_12xvw_1203 { width: 10px; height: 10px; border-radius: 3px; background: #2563eb; } ._docTitleLine_12xvw_1217 { height: 6px; width: 50%; border-radius: 3px; background: #0f1e46; opacity: 0.85; } ._docLine_12xvw_1233 { display: block; height: 6px; border-radius: 3px; background: #c9d7ee; transform-origin: left center; animation: _avdWrite_12xvw_1 3.9s ease-in-out infinite; } ._docCursor_12xvw_1251 { position: absolute; right: 12px; bottom: 12px; width: 2px; height: 14px; background: #2563eb; animation: _avdBlink_12xvw_1 0.9s steps(1) infinite; } @keyframes _avdWrite_12xvw_1 { 0% { transform: scaleX(0); opacity: 0.4; } 35% { transform: scaleX(1); opacity: 1; } 88% { transform: scaleX(1); opacity: 1; } 100% { transform: scaleX(1); opacity: 0; } } @keyframes _avdBlink_12xvw_1 { 0%, 50% { opacity: 1; } 51%, 100% { opacity: 0; } } ._sceneIdle_12xvw_1341 ._videoCard_12xvw_875, ._sceneIdle_12xvw_1341 ._scanLine_12xvw_929, ._sceneIdle_12xvw_1341 ._flowDot_12xvw_1077, ._sceneIdle_12xvw_1341 ._docLine_12xvw_1233, ._sceneIdle_12xvw_1341 ._docCursor_12xvw_1251 { animation-play-state: paused; } ._sceneIdle_12xvw_1341 ._flowDot_12xvw_1077, ._sceneIdle_12xvw_1341 ._scanLine_12xvw_929, ._sceneIdle_12xvw_1341 ._docCursor_12xvw_1251 { opacity: 0; } ._sceneIdle_12xvw_1341 ._docLine_12xvw_1233 { transform: scaleX(1); opacity: 1; animation: none; } ._sceneQueued_12xvw_1381 ._docLine_12xvw_1233 { animation: none; transform: scaleX(1); opacity: 0.45; } ._sceneQueued_12xvw_1381 ._flowDot_12xvw_1077, ._sceneQueued_12xvw_1381 ._docCursor_12xvw_1251 { animation: none; opacity: 0; } ._sceneQueued_12xvw_1381 ._scanLine_12xvw_929 { animation-duration: 4.5s; } ._sceneQueued_12xvw_1381 ._videoCard_12xvw_875 { animation-duration: 4.5s; } /* ============================================================ PIPELINE STEPS ============================================================ */ ._steps_12xvw_1429 { position: relative; display: flex; justify-content: space-between; margin: 0; padding: 0; list-style: none; } ._steps_12xvw_1429::before { content: ""; position: absolute; left: 12%; right: 12%; top: 10px; height: 2px; background: #cbd8ee; } ._step_12xvw_1429 { position: relative; z-index: 1; display: flex; flex-direction: column; align-items: center; gap: 6px; flex: 1; text-align: center; } ._stepDot_12xvw_1489 { display: inline-flex; align-items: center; justify-content: center; width: 22px; height: 22px; border-radius: 50%; border: 2px solid #cbd8ee; background: #eef4fd; color: #ffffff; font-size: 14px; transition: all 0.25s ease; } ._stepLabel_12xvw_1517 { font-size: 12px; color: #64748b; } ._stepDone_12xvw_1527 ._stepDot_12xvw_1489 { border-color: #16a34a; background: #16a34a; } ._stepDone_12xvw_1527 ._stepLabel_12xvw_1517 { color: #15803d; } ._stepActive_12xvw_1545 ._stepDot_12xvw_1489 { border-color: #2563eb; background: #ffffff; animation: _avdRing_12xvw_1 1.6s ease-out infinite; } ._stepActive_12xvw_1545 ._stepLabel_12xvw_1517 { color: #1d4ed8; font-weight: 600; } @keyframes _avdRing_12xvw_1 { 0% { box-shadow: 0 0 0 0 rgba(37, 99, 235, 0.45); } 100% { box-shadow: 0 0 0 9px rgba(37, 99, 235, 0); } } /* ============================================================ TABLE CELLS ============================================================ */ ._itemName_12xvw_1595 { font-weight: 500; color: #0f172a; } ._dateCell_12xvw_1605 { font-size: 13px; color: #334155; line-height: 1.5; } ._statusCell_12xvw_1617 { display: flex; flex-direction: column; gap: 6px; min-width: 120px; } ._badge_12xvw_1631 { display: inline-flex; align-items: center; align-self: flex-start; gap: 6px; padding: 5px 10px; border-radius: 8px; font-size: 13px; font-weight: 600; white-space: nowrap; } ._badgeCompleted_12xvw_1655 { background: #dcfce7; color: #15803d; } ._badgeProcessing_12xvw_1665 { background: #e0ebff; color: #1d4ed8; } ._badgePending_12xvw_1675 { background: #fef3c7; color: #b45309; } ._badgeFailed_12xvw_1685 { background: #fee2e2; color: #b91c1c; } ._miniBar_12xvw_1695 { position: relative; width: 100%; max-width: 120px; height: 4px; border-radius: 999px; background: #dbe5f5; overflow: hidden; } ._miniBar_12xvw_1695 span { position: absolute; top: 0; bottom: 0; left: 0; width: 40%; border-radius: 999px; background: #2563eb; animation: _avdSlide_12xvw_1 1.3s ease-in-out infinite; } ._miniBarSlow_12xvw_1737 span { background: #f59e0b; animation-duration: 2.4s; } @keyframes _avdSlide_12xvw_1 { 0% { left: -40%; } 100% { left: 100%; } } ._docChip_12xvw_1767 { display: inline-flex; align-items: center; align-self: flex-start; gap: 6px; padding: 4px 10px; border-radius: 7px; background: #eef4ff; color: #1d4ed8; font-size: 12px; font-weight: 700; } ._writingText_12xvw_1793 { font-size: 12px; font-weight: 600; color: #1d4ed8; animation: _avdPulse_12xvw_1 1.4s ease-in-out infinite; } /* ============================================================ GRID CARD ============================================================ */ ._gridCard_12xvw_1815 { display: flex; flex-direction: column; gap: 10px; padding: 14px; border: 1px solid #e2e8f0; border-radius: 12px; background: #ffffff; } ._gridMeta_12xvw_1835 { display: flex; align-items: center; justify-content: space-between; gap: 8px; flex-wrap: wrap; } /* ============================================================ RESPONSIVE + REDUCED MOTION ============================================================ */ @media (max-width: 992px) { ._topGrid_12xvw_91 { grid-template-columns: 1fr; } } @media (max-width: 576px) { ._videoCard_12xvw_875 { width: 96px; } ._docCard_12xvw_1161 { width: 100px; } ._stepLabel_12xvw_1517 { font-size: 11px; } } @media (prefers-reduced-motion: reduce) { ._videoCard_12xvw_875, ._scanLine_12xvw_929, ._flowDot_12xvw_1077, ._docLine_12xvw_1233, ._docCursor_12xvw_1251, ._miniBar_12xvw_1695 span, ._stepActive_12xvw_1545 ._stepDot_12xvw_1489, ._pulseIcon_12xvw_31, ._writingText_12xvw_1793 { animation: none; } ._docLine_12xvw_1233 { transform: scaleX(1); opacity: 1; } ._flowDot_12xvw_1077 { opacity: 1; left: 40%; } }/* ====================================================== THEME TOKENS (falls back to sensible defaults if your global variables have different names) ====================================================== */ ._page_fgtuk_13 { --vg-primary: var(--primary-color, #4f46e5); --vg-primary-soft: color-mix(in srgb, var(--vg-primary) 9%, transparent); --vg-primary-border: color-mix(in srgb, var(--vg-primary) 40%, transparent); --vg-text: var(--text-primary, #0f172a); --vg-muted: var(--text-secondary, #64748b); --vg-border: var(--border-color, #e2e8f0); --vg-surface: var(--card-bg, #ffffff); --vg-surface-muted: #f8fafc; --vg-danger: #dc2626; --vg-danger-soft: #fef2f2; --vg-success: #16a34a; --vg-success-soft: #f0fdf4; --vg-warning: #d97706; --vg-warning-soft: #fffbeb; --vg-info: #2563eb; --vg-info-soft: #eff6ff; --vg-radius: 12px; --vg-shadow: 0 1px 2px rgba(15, 23, 42, 0.04), 0 4px 16px rgba(15, 23, 42, 0.06); display: flex; flex-direction: column; gap: 20px; padding: 24px; color: var(--vg-text); } /* ====================================================== HEADER ====================================================== */ ._pageHeader_fgtuk_75 { display: flex; align-items: flex-start; justify-content: space-between; gap: 16px; flex-wrap: wrap; } ._titleRow_fgtuk_91 { display: flex; align-items: center; gap: 10px; flex-wrap: wrap; min-width: 0; } ._pageTitle_fgtuk_107 { margin: 0; font-size: 24px; font-weight: 700; line-height: 1.25; } ._poweredBadge_fgtuk_121 { display: inline-flex; align-items: center; gap: 4px; padding: 3px 9px; border-radius: 999px; background: var(--vg-primary-soft); color: var(--vg-primary); font-size: 12px; font-weight: 600; } ._pageDescription_fgtuk_145 { margin: 6px 0 0; color: var(--vg-muted); font-size: 14px; max-width: 620px; } /* ====================================================== TOOLBAR ====================================================== */ ._listSection_fgtuk_167 { display: flex; flex-direction: column; gap: 16px; } ._toolbar_fgtuk_179 { display: flex; align-items: center; gap: 12px; flex-wrap: wrap; padding: 12px; background: var(--vg-surface); border: 1px solid var(--vg-border); border-radius: var(--vg-radius); } ._searchBox_fgtuk_201 { position: relative; flex: 1 1 260px; max-width: 380px; } ._searchIcon_fgtuk_213 { position: absolute; left: 12px; top: 50%; transform: translateY(-50%); color: var(--vg-muted); pointer-events: none; } ._searchInput_fgtuk_231 { width: 100%; height: 38px; padding: 0 34px 0 36px; border: 1px solid var(--vg-border); border-radius: 8px; background: var(--vg-surface); color: var(--vg-text); font-size: 14px; outline: none; transition: border-color 0.15s ease, box-shadow 0.15s ease; } ._searchInput_fgtuk_231:focus { border-color: var(--vg-primary); box-shadow: 0 0 0 3px var(--vg-primary-soft); } ._searchClear_fgtuk_267 { position: absolute; right: 8px; top: 50%; transform: translateY(-50%); display: inline-flex; align-items: center; justify-content: center; width: 22px; height: 22px; border: none; border-radius: 50%; background: var(--vg-surface-muted); color: var(--vg-muted); cursor: pointer; } ._filterPills_fgtuk_301 { display: flex; gap: 6px; flex-wrap: wrap; flex: 1 1 auto; } ._filterPill_fgtuk_301 { height: 32px; padding: 0 14px; border: 1px solid var(--vg-border); border-radius: 999px; background: var(--vg-surface); color: var(--vg-muted); font-size: 13px; font-weight: 500; cursor: pointer; transition: all 0.15s ease; } ._filterPill_fgtuk_301:hover { color: var(--vg-text); border-color: var(--vg-primary-border); } ._filterPillActive_fgtuk_351, ._filterPillActive_fgtuk_351:hover { background: var(--vg-primary); border-color: var(--vg-primary); color: #fff; } ._iconButton_fgtuk_365 { display: inline-flex; align-items: center; justify-content: center; flex-shrink: 0; width: 36px; height: 36px; border: 1px solid var(--vg-border); border-radius: 8px; background: var(--vg-surface); color: var(--vg-muted); cursor: pointer; text-decoration: none; transition: all 0.15s ease; } ._iconButton_fgtuk_365:hover:not(:disabled) { color: var(--vg-primary); border-color: var(--vg-primary-border); background: var(--vg-primary-soft); } ._iconButton_fgtuk_365:disabled { opacity: 0.5; cursor: not-allowed; } ._spinIcon_fgtuk_419 { animation: _vgSpin_fgtuk_1 0.9s linear infinite; } /* ====================================================== NOTICE + SELECTION ====================================================== */ ._noticeBanner_fgtuk_435 { display: flex; align-items: center; gap: 8px; padding: 10px 14px; border: 1px solid color-mix(in srgb, var(--vg-success) 30%, transparent); border-radius: 10px; background: var(--vg-success-soft); color: var(--vg-success); font-size: 14px; font-weight: 500; animation: _vgFadeIn_fgtuk_1 0.2s ease; } ._selectionBar_fgtuk_463 { display: flex; align-items: center; gap: 16px; flex-wrap: wrap; min-height: 40px; } ._checkboxLabel_fgtuk_479 { display: inline-flex; align-items: center; gap: 8px; font-size: 14px; font-weight: 500; cursor: pointer; user-select: none; } ._checkboxLabel_fgtuk_479 input, ._cardCheckbox_fgtuk_501 input { width: 16px; height: 16px; accent-color: var(--vg-primary); cursor: pointer; } ._resultCount_fgtuk_515 { color: var(--vg-muted); font-size: 13px; } ._selectionActions_fgtuk_525 { display: flex; align-items: center; gap: 10px; margin-left: auto; } ._textButton_fgtuk_539 { display: inline-flex; align-items: center; gap: 5px; padding: 4px 6px; border: none; background: transparent; color: var(--vg-primary); font-size: 13px; font-weight: 600; cursor: pointer; } ._textButton_fgtuk_539:disabled { opacity: 0.5; cursor: not-allowed; } ._dangerButton_fgtuk_575 { display: inline-flex; align-items: center; gap: 6px; background: var(--vg-danger) !important; border-color: var(--vg-danger) !important; color: #fff !important; } ._dangerButton_fgtuk_575:hover:not(:disabled) { filter: brightness(0.92); } ._dangerGhostButton_fgtuk_601 { display: inline-flex; align-items: center; gap: 6px; background: transparent !important; border: 1px solid color-mix(in srgb, var(--vg-danger) 35%, transparent) !important; color: var(--vg-danger) !important; } ._dangerGhostButton_fgtuk_601:hover:not(:disabled) { background: var(--vg-danger-soft) !important; } ._anchorButton_fgtuk_627 { display: inline-flex; align-items: center; gap: 6px; text-decoration: none; } /* ====================================================== GRID + CARD ====================================================== */ ._grid_fgtuk_649 { display: grid; grid-template-columns: repeat(auto-fill, minmax(270px, 1fr)); gap: 18px; } ._card_fgtuk_501 { display: flex; flex-direction: column; overflow: hidden; border: 1px solid var(--vg-border); border-radius: var(--vg-radius); background: var(--vg-surface); transition: box-shadow 0.2s ease, border-color 0.2s ease, transform 0.2s ease; } ._card_fgtuk_501:hover { box-shadow: var(--vg-shadow); transform: translateY(-2px); } ._cardSelected_fgtuk_691 { border-color: var(--vg-primary); box-shadow: 0 0 0 2px var(--vg-primary-soft); } ._cardMedia_fgtuk_701 { position: relative; aspect-ratio: 16 / 9; overflow: hidden; background: #0f172a; cursor: pointer; outline: none; } ._cardMedia_fgtuk_701:focus-visible { box-shadow: inset 0 0 0 3px var(--vg-primary); } ._cardVideo_fgtuk_727 { width: 100%; height: 100%; object-fit: cover; display: block; } ._playOverlay_fgtuk_741 { position: absolute; left: 50%; top: 50%; display: inline-flex; align-items: center; justify-content: center; width: 44px; height: 44px; border-radius: 50%; background: rgba(15, 23, 42, 0.55); color: #fff; backdrop-filter: blur(4px); transform: translate(-50%, -50%); pointer-events: none; transition: opacity 0.2s ease; } ._cardMedia_fgtuk_701:hover ._playOverlay_fgtuk_741 { opacity: 0; } ._mediaPlaceholder_fgtuk_785 { display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 10px; width: 100%; height: 100%; background: linear-gradient(135deg, #1e1b4b 0%, #312e81 50%, #1e293b 100%); color: rgba(255, 255, 255, 0.85); font-size: 13px; font-weight: 500; } ._mediaPlaceholderDanger_fgtuk_813 { background: linear-gradient(135deg, #450a0a 0%, #7f1d1d 100%); } ._spinner_fgtuk_821 { width: 26px; height: 26px; border: 3px solid rgba(255, 255, 255, 0.25); border-top-color: #fff; border-radius: 50%; animation: _vgSpin_fgtuk_1 0.9s linear infinite; } ._cardCheckbox_fgtuk_501 { position: absolute; top: 10px; left: 10px; display: inline-flex; align-items: center; justify-content: center; width: 28px; height: 28px; border-radius: 7px; background: rgba(255, 255, 255, 0.92); box-shadow: 0 1px 3px rgba(0, 0, 0, 0.2); cursor: pointer; } ._cardStatus_fgtuk_869 { position: absolute; top: 10px; right: 10px; } ._cardBody_fgtuk_881 { display: flex; flex-direction: column; gap: 6px; padding: 14px 14px 10px; flex: 1; } ._cardTitle_fgtuk_897 { margin: 0; overflow: hidden; font-size: 15px; font-weight: 600; text-overflow: ellipsis; white-space: nowrap; } ._cardPrompt_fgtuk_915 { display: -webkit-box; margin: 0; overflow: hidden; color: var(--vg-muted); font-size: 13px; line-height: 1.5; -webkit-line-clamp: 2; -webkit-box-orient: vertical; min-height: 39px; } ._cardMeta_fgtuk_939 { display: flex; gap: 6px; flex-wrap: wrap; margin-top: 4px; } ._metaChip_fgtuk_953 { display: inline-flex; align-items: center; gap: 4px; padding: 2px 8px; border-radius: 6px; background: var(--vg-surface-muted); border: 1px solid var(--vg-border); color: var(--vg-muted); font-size: 12px; font-weight: 500; } ._cardFooter_fgtuk_979 { display: flex; align-items: center; justify-content: space-between; gap: 8px; padding: 10px 14px; border-top: 1px solid var(--vg-border); } ._cardDate_fgtuk_997 { color: var(--vg-muted); font-size: 12px; } ._cardActions_fgtuk_1007 { display: flex; align-items: center; gap: 8px; } ._cardActions_fgtuk_1007 ._iconButton_fgtuk_365 { width: 32px; height: 32px; } ._linkButton_fgtuk_1029 { display: inline-flex; align-items: center; gap: 6px; height: 32px; padding: 0 12px; border: 1px solid var(--vg-primary-border); border-radius: 8px; background: var(--vg-primary-soft); color: var(--vg-primary); font-size: 13px; font-weight: 600; cursor: pointer; transition: all 0.15s ease; } ._linkButton_fgtuk_1029:hover { background: var(--vg-primary); color: #fff; } /* ====================================================== SKELETON / EMPTY ====================================================== */ ._skeletonCard_fgtuk_1079 { display: flex; flex-direction: column; gap: 10px; padding-bottom: 16px; overflow: hidden; border: 1px solid var(--vg-border); border-radius: var(--vg-radius); background: var(--vg-surface); } ._skeletonMedia_fgtuk_1101, ._skeletonLine_fgtuk_1103 { background: linear-gradient(90deg, #f1f5f9 25%, #e2e8f0 37%, #f1f5f9 63%); background-size: 400% 100%; animation: _vgShimmer_fgtuk_1 1.4s ease infinite; } ._skeletonMedia_fgtuk_1101 { aspect-ratio: 16 / 9; } ._skeletonLine_fgtuk_1103 { height: 12px; margin: 0 14px; border-radius: 6px; } ._skeletonLineShort_fgtuk_1135 { width: 55%; } ._emptyState_fgtuk_1143 { display: flex; flex-direction: column; align-items: center; gap: 10px; padding: 56px 24px; border: 1px dashed var(--vg-border); border-radius: var(--vg-radius); background: var(--vg-surface); text-align: center; } ._emptyState_fgtuk_1143 h3 { margin: 4px 0 0; font-size: 17px; font-weight: 600; } ._emptyState_fgtuk_1143 p { margin: 0 0 8px; max-width: 420px; color: var(--vg-muted); font-size: 14px; } ._emptyIcon_fgtuk_1193 { display: inline-flex; align-items: center; justify-content: center; width: 54px; height: 54px; border-radius: 16px; background: var(--vg-primary-soft); color: var(--vg-primary); } ._emptyIconDanger_fgtuk_1215 { background: var(--vg-danger-soft); color: var(--vg-danger); } /* ====================================================== PAGINATION ====================================================== */ ._pagination_fgtuk_1233 { display: flex; align-items: center; justify-content: space-between; gap: 12px; } ._paginationInfo_fgtuk_1247 { color: var(--vg-muted); font-size: 13px; } ._paginationButtons_fgtuk_1257 { display: flex; gap: 8px; } /* ====================================================== STATUS BADGE ====================================================== */ ._statusBadge_fgtuk_1275 { display: inline-flex; align-items: center; gap: 6px; padding: 3px 10px; border-radius: 999px; font-size: 12px; font-weight: 600; white-space: nowrap; border: 1px solid transparent; } ._statusDot_fgtuk_1299, ._statusPulse_fgtuk_1301 { width: 7px; height: 7px; border-radius: 50%; background: currentColor; } ._statusPulse_fgtuk_1301 { animation: _vgPulse_fgtuk_1 1.3s ease-in-out infinite; } ._tone_info_fgtuk_1323 { background: var(--vg-info-soft); color: var(--vg-info); border-color: color-mix(in srgb, var(--vg-info) 25%, transparent); } ._tone_warning_fgtuk_1335 { background: var(--vg-warning-soft); color: var(--vg-warning); border-color: color-mix(in srgb, var(--vg-warning) 25%, transparent); } ._tone_success_fgtuk_1347 { background: var(--vg-success-soft); color: var(--vg-success); border-color: color-mix(in srgb, var(--vg-success) 25%, transparent); } ._tone_danger_fgtuk_1359 { background: var(--vg-danger-soft); color: var(--vg-danger); border-color: color-mix(in srgb, var(--vg-danger) 25%, transparent); } ._tone_neutral_fgtuk_1371 { background: #f1f5f9; color: #475569; border-color: #e2e8f0; } /* ====================================================== MODAL BASE ====================================================== */ ._modalOverlay_fgtuk_1391 { position: fixed; inset: 0; z-index: 1000; display: flex; align-items: center; justify-content: center; padding: 24px; background: rgba(15, 23, 42, 0.55); backdrop-filter: blur(3px); animation: _vgFadeIn_fgtuk_1 0.15s ease; } ._confirmOverlay_fgtuk_1417 { z-index: 1100; } ._modal_fgtuk_1391 { display: flex; flex-direction: column; width: 100%; max-width: 560px; max-height: calc(100vh - 48px); overflow: hidden; border-radius: 16px; background: var(--vg-surface); box-shadow: 0 24px 64px rgba(15, 23, 42, 0.25); animation: _vgSlideUp_fgtuk_1 0.2s ease; } ._modalLarge_fgtuk_1451 { max-width: 1020px; } ._modalForm_fgtuk_1459 { display: flex; flex-direction: column; min-height: 0; flex: 1; } ._modalHeader_fgtuk_1473 { display: flex; align-items: flex-start; justify-content: space-between; gap: 16px; padding: 20px 24px; border-bottom: 1px solid var(--vg-border); } ._modalHeaderContent_fgtuk_1491 { display: flex; align-items: flex-start; gap: 14px; min-width: 0; } ._headerTextWrap_fgtuk_1505 { min-width: 0; } ._modalHeaderIcon_fgtuk_1513 { display: inline-flex; align-items: center; justify-content: center; flex-shrink: 0; width: 40px; height: 40px; border-radius: 11px; background: var(--vg-primary-soft); color: var(--vg-primary); } ._modalTitle_fgtuk_1537 { margin: 0; overflow: hidden; font-size: 18px; font-weight: 700; text-overflow: ellipsis; white-space: nowrap; max-width: 560px; } ._modalDescription_fgtuk_1557 { margin: 4px 0 0; color: var(--vg-muted); font-size: 13px; } ._closeButton_fgtuk_1569 { display: inline-flex; align-items: center; justify-content: center; flex-shrink: 0; width: 34px; height: 34px; border: none; border-radius: 8px; background: transparent; color: var(--vg-muted); cursor: pointer; } ._closeButton_fgtuk_1569:hover:not(:disabled) { background: var(--vg-surface-muted); color: var(--vg-text); } ._modalBody_fgtuk_1607 { flex: 1; min-height: 0; overflow-y: auto; padding: 22px 24px; } ._modalFooter_fgtuk_1621 { display: flex; align-items: center; justify-content: space-between; gap: 12px; flex-wrap: wrap; padding: 16px 24px; border-top: 1px solid var(--vg-border); background: var(--vg-surface-muted); } ._footerHint_fgtuk_1643 { display: inline-flex; align-items: center; gap: 6px; color: var(--vg-muted); font-size: 13px; } ._footerActions_fgtuk_1659 { display: flex; align-items: center; gap: 10px; flex-wrap: wrap; margin-left: auto; } ._footerActions_fgtuk_1659 .app-btn, ._modalFooter_fgtuk_1621 > .app-btn { display: inline-flex; align-items: center; gap: 6px; } ._buttonSpinner_fgtuk_1689 { display: inline-block; width: 14px; height: 14px; border: 2px solid rgba(255, 255, 255, 0.4); border-top-color: #fff; border-radius: 50%; animation: _vgSpin_fgtuk_1 0.8s linear infinite; } /* ====================================================== FORM ====================================================== */ ._createLayout_fgtuk_1717, ._detailsLayout_fgtuk_1719 { display: grid; grid-template-columns: minmax(0, 1fr) 320px; gap: 24px; align-items: start; } ._createMain_fgtuk_1733, ._detailsMain_fgtuk_1735 { display: flex; flex-direction: column; gap: 18px; min-width: 0; } ._createSide_fgtuk_1749, ._detailsSide_fgtuk_1751 { display: flex; flex-direction: column; gap: 14px; position: sticky; top: 0; } ._formGroup_fgtuk_1767 { display: flex; flex-direction: column; gap: 6px; } ._formGroup_fgtuk_1767 > label, ._labelRow_fgtuk_1781 label { display: inline-flex; align-items: center; gap: 6px; font-size: 14px; font-weight: 600; color: var(--vg-text); } ._labelRow_fgtuk_1781 { display: flex; align-items: center; justify-content: space-between; gap: 10px; } ._required_fgtuk_1813 { color: var(--vg-danger); } ._helpText_fgtuk_1821 { margin: 0; color: var(--vg-muted); font-size: 13px; } ._charCount_fgtuk_1833 { color: var(--vg-muted); font-size: 12px; font-variant-numeric: tabular-nums; } ._charCountOver_fgtuk_1845 { color: var(--vg-danger); font-weight: 600; } ._textarea_fgtuk_1855 { min-height: 140px; resize: vertical; line-height: 1.55; font-family: inherit; } ._inputError_fgtuk_1869 { border-color: var(--vg-danger) !important; } ._inputError_fgtuk_1869:focus { box-shadow: 0 0 0 3px var(--vg-danger-soft) !important; } ._errorText_fgtuk_1885 { color: var(--vg-danger); font-size: 12px; font-weight: 500; } ._promptIdeas_fgtuk_1897 { display: flex; align-items: center; gap: 6px; flex-wrap: wrap; margin-top: 4px; } ._promptIdeasLabel_fgtuk_1913 { color: var(--vg-muted); font-size: 12px; font-weight: 600; } ._ideaChip_fgtuk_1925 { padding: 4px 10px; border: 1px dashed var(--vg-primary-border); border-radius: 999px; background: transparent; color: var(--vg-primary); font-size: 12px; font-weight: 500; cursor: pointer; transition: background 0.15s ease; } ._ideaChip_fgtuk_1925:hover:not(:disabled) { background: var(--vg-primary-soft); } ._submitError_fgtuk_1957 { padding: 10px 14px; border: 1px solid color-mix(in srgb, var(--vg-danger) 30%, transparent); border-radius: 10px; background: var(--vg-danger-soft); color: var(--vg-danger); font-size: 13px; font-weight: 500; } /* ====================================================== REFERENCES ====================================================== */ ._referenceSection_fgtuk_1985 { overflow: hidden; border: 1px solid var(--vg-border); border-radius: var(--vg-radius); } ._referenceToggle_fgtuk_1997 { display: flex; align-items: center; justify-content: space-between; gap: 12px; width: 100%; padding: 14px 16px; border: none; background: var(--vg-surface-muted); color: var(--vg-text); text-align: left; cursor: pointer; } ._referenceTitle_fgtuk_2025 { display: flex; align-items: center; gap: 8px; font-size: 14px; font-weight: 600; } ._optionalTag_fgtuk_2041 { padding: 1px 7px; border-radius: 999px; background: #e2e8f0; color: #475569; font-size: 11px; font-weight: 600; } ._referenceSubtitle_fgtuk_2059 { display: block; margin-top: 3px; color: var(--vg-muted); font-size: 12px; } ._chevron_fgtuk_2073 { flex-shrink: 0; color: var(--vg-muted); transition: transform 0.2s ease; } ._chevronOpen_fgtuk_2085 { transform: rotate(180deg); } ._referenceBody_fgtuk_2093 { display: flex; flex-direction: column; gap: 16px; padding: 16px; border-top: 1px solid var(--vg-border); } ._referenceRowWrap_fgtuk_2109 { display: flex; flex-direction: column; gap: 4px; } ._referenceRow_fgtuk_2109 { display: flex; align-items: center; gap: 8px; } ._referenceRow_fgtuk_2109 input { flex: 1; min-width: 0; } ._referenceThumb_fgtuk_2143 { position: relative; display: inline-flex; align-items: center; justify-content: center; flex-shrink: 0; width: 38px; height: 38px; overflow: hidden; border: 1px solid var(--vg-border); border-radius: 8px; background: var(--vg-surface-muted); color: var(--vg-muted); } ._referenceThumb_fgtuk_2143 img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; } ._addLinkButton_fgtuk_2189 { display: inline-flex; align-items: center; gap: 6px; align-self: flex-start; padding: 4px 0; border: none; background: transparent; color: var(--vg-primary); font-size: 13px; font-weight: 600; cursor: pointer; } ._referenceTip_fgtuk_2217 { display: flex; align-items: flex-start; gap: 8px; padding: 10px 12px; border-radius: 8px; background: var(--vg-info-soft); color: #1e40af; font-size: 12px; line-height: 1.5; } ._referenceTip_fgtuk_2217 svg { flex-shrink: 0; margin-top: 2px; } /* ====================================================== SETTINGS PANEL ====================================================== */ ._settingsCard_fgtuk_2259 { display: flex; flex-direction: column; gap: 16px; padding: 16px; border: 1px solid var(--vg-border); border-radius: var(--vg-radius); background: var(--vg-surface); } ._settingsTitle_fgtuk_2279 { margin: 0; color: var(--vg-muted); font-size: 12px; font-weight: 700; letter-spacing: 0.05em; text-transform: uppercase; } ._ratioGrid_fgtuk_2297 { display: grid; grid-template-columns: repeat(3, 1fr); gap: 8px; } ._ratioOption_fgtuk_2309 { display: flex; flex-direction: column; align-items: center; gap: 4px; padding: 10px 4px 8px; border: 1px solid var(--vg-border); border-radius: 10px; background: var(--vg-surface); color: var(--vg-text); cursor: pointer; transition: all 0.15s ease; } ._ratioOption_fgtuk_2309:hover:not(:disabled) { border-color: var(--vg-primary-border); } ._ratioOptionActive_fgtuk_2345, ._ratioOptionActive_fgtuk_2345:hover:not(:disabled) { border-color: var(--vg-primary); background: var(--vg-primary-soft); box-shadow: 0 0 0 1px var(--vg-primary); } ._ratioShape_fgtuk_2359 { display: block; margin: 2px 0 4px; border: 2px solid currentColor; border-radius: 3px; color: var(--vg-muted); } ._ratioOptionActive_fgtuk_2345 ._ratioShape_fgtuk_2359 { color: var(--vg-primary); } ._ratioLabel_fgtuk_2383 { font-size: 13px; font-weight: 600; } ._ratioHint_fgtuk_2393 { color: var(--vg-muted); font-size: 10.5px; white-space: nowrap; } ._durationGroup_fgtuk_2405 { display: flex; gap: 6px; flex-wrap: wrap; } ._durationOption_fgtuk_2417 { flex: 1 0 calc(33% - 6px); height: 34px; border: 1px solid var(--vg-border); border-radius: 8px; background: var(--vg-surface); color: var(--vg-text); font-size: 13px; font-weight: 600; cursor: pointer; transition: all 0.15s ease; } ._durationOption_fgtuk_2417:hover:not(:disabled) { border-color: var(--vg-primary-border); } ._durationOptionActive_fgtuk_2451, ._durationOptionActive_fgtuk_2451:hover:not(:disabled) { border-color: var(--vg-primary); background: var(--vg-primary); color: #fff; } ._toggleList_fgtuk_2465 { display: flex; flex-direction: column; gap: 2px; border-top: 1px solid var(--vg-border); padding-top: 8px; } ._toggleRow_fgtuk_2481 { display: flex; align-items: center; justify-content: space-between; gap: 12px; padding: 8px 0; } ._toggleLabel_fgtuk_2497 { font-size: 14px; font-weight: 600; cursor: pointer; } ._toggleDescription_fgtuk_2509 { margin: 2px 0 0; color: var(--vg-muted); font-size: 12px; } ._toggleSwitch_fgtuk_2521 { position: relative; flex-shrink: 0; width: 40px; height: 22px; padding: 0; border: none; border-radius: 999px; background: #cbd5e1; cursor: pointer; transition: background 0.2s ease; } ._toggleSwitchActive_fgtuk_2547 { background: var(--vg-primary); } ._toggleSwitch_fgtuk_2521:disabled { opacity: 0.6; cursor: not-allowed; } ._toggleKnob_fgtuk_2565 { position: absolute; top: 3px; left: 3px; width: 16px; height: 16px; border-radius: 50%; background: #fff; box-shadow: 0 1px 3px rgba(0, 0, 0, 0.2); transition: transform 0.2s ease; } ._toggleSwitchActive_fgtuk_2547 ._toggleKnob_fgtuk_2565 { transform: translateX(18px); } ._summaryCard_fgtuk_2597 { padding: 14px 16px; border-radius: var(--vg-radius); background: var(--vg-primary-soft); border: 1px solid var(--vg-primary-border); } ._summaryLabel_fgtuk_2611 { color: var(--vg-primary); font-size: 11px; font-weight: 700; letter-spacing: 0.05em; text-transform: uppercase; } ._summaryText_fgtuk_2627 { margin: 4px 0 0; font-size: 14px; font-weight: 600; } /* ====================================================== DETAILS MODAL ====================================================== */ ._playerWrap_fgtuk_2647 { display: flex; justify-content: center; overflow: hidden; border-radius: var(--vg-radius); background: #0f172a; } ._player_fgtuk_2647 { display: block; width: 100%; max-height: 58vh; background: #000; object-fit: contain; } ._playerState_fgtuk_2679 { display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 10px; width: 100%; max-height: 58vh; min-height: 260px; padding: 24px; background: radial-gradient(circle at 50% 30%, #312e81 0%, #1e1b4b 45%, #0f172a 100%); color: rgba(255, 255, 255, 0.9); text-align: center; } ._playerState_fgtuk_2679 h3 { margin: 4px 0 0; font-size: 17px; font-weight: 600; color: #fff; } ._playerState_fgtuk_2679 p { margin: 0; max-width: 400px; color: rgba(255, 255, 255, 0.7); font-size: 13px; line-height: 1.55; } ._playerStateError_fgtuk_2739 { background: radial-gradient(circle at 50% 30%, #7f1d1d 0%, #450a0a 55%, #0f172a 100%); } ._generatingOrb_fgtuk_2747 { display: inline-flex; align-items: center; justify-content: center; width: 56px; height: 56px; border-radius: 50%; background: rgba(255, 255, 255, 0.12); color: #fff; box-shadow: 0 0 0 0 rgba(165, 180, 252, 0.6); animation: _vgGlow_fgtuk_1 1.8s ease-out infinite; } ._progressTrack_fgtuk_2773 { position: relative; width: min(260px, 80%); height: 4px; margin-top: 6px; overflow: hidden; border-radius: 999px; background: rgba(255, 255, 255, 0.15); } ._progressBar_fgtuk_2793 { position: absolute; top: 0; left: -40%; width: 40%; height: 100%; border-radius: 999px; background: linear-gradient(90deg, transparent, #a5b4fc, transparent); animation: _vgIndeterminate_fgtuk_1 1.4s ease-in-out infinite; } ._elapsed_fgtuk_2815 { display: inline-flex; align-items: center; gap: 5px; color: rgba(255, 255, 255, 0.65); font-size: 12px; font-variant-numeric: tabular-nums; } ._lastFrame_fgtuk_2833 { display: flex; align-items: center; gap: 12px; padding: 10px; border: 1px solid var(--vg-border); border-radius: 10px; } ._lastFrame_fgtuk_2833 img { width: 88px; height: 52px; border-radius: 6px; object-fit: cover; background: var(--vg-surface-muted); } ._lastFrame_fgtuk_2833 > div { display: flex; flex-direction: column; gap: 4px; } ._detailLabel_fgtuk_2879 { color: var(--vg-muted); font-size: 12px; font-weight: 700; letter-spacing: 0.04em; text-transform: uppercase; } ._inlineLink_fgtuk_2895 { display: inline-flex; align-items: center; gap: 4px; color: var(--vg-primary); font-size: 13px; font-weight: 600; text-decoration: none; } ._promptBlock_fgtuk_2915 { display: flex; flex-direction: column; gap: 8px; padding: 14px 16px; border: 1px solid var(--vg-border); border-radius: var(--vg-radius); background: var(--vg-surface-muted); } ._promptText_fgtuk_2935 { margin: 0; font-size: 14px; line-height: 1.6; white-space: pre-wrap; word-break: break-word; } ._detailList_fgtuk_2951 { display: flex; flex-direction: column; margin: 0; } ._detailRow_fgtuk_2963 { display: flex; justify-content: space-between; gap: 12px; padding: 9px 0; border-bottom: 1px solid var(--vg-border); font-size: 13px; } ._detailRow_fgtuk_2963:last-child { border-bottom: none; padding-bottom: 0; } ._detailRow_fgtuk_2963:first-child { padding-top: 0; } ._detailRow_fgtuk_2963 dt { color: var(--vg-muted); } ._detailRow_fgtuk_2963 dd { margin: 0; min-width: 0; font-weight: 600; text-align: right; word-break: break-all; } ._code_fgtuk_3023 { padding: 2px 6px; border-radius: 5px; background: var(--vg-surface-muted); font-family: ui-monospace, SFMono-Regular, Menlo, monospace; font-size: 11.5px; font-weight: 500; } ._refImageGrid_fgtuk_3041 { display: grid; grid-template-columns: repeat(4, 1fr); gap: 8px; } ._refImage_fgtuk_3041 { position: relative; display: block; aspect-ratio: 1; overflow: hidden; border: 1px solid var(--vg-border); border-radius: 8px; background: var(--vg-surface-muted); } ._refImage_fgtuk_3041 img { width: 100%; height: 100%; object-fit: cover; transition: transform 0.2s ease; } ._refImage_fgtuk_3041:hover img { transform: scale(1.06); } ._refImage_fgtuk_3041 span { position: absolute; bottom: 4px; left: 4px; min-width: 18px; padding: 0 5px; border-radius: 5px; background: rgba(15, 23, 42, 0.7); color: #fff; font-size: 11px; font-weight: 600; text-align: center; } ._refLink_fgtuk_3123 { display: flex; align-items: center; gap: 8px; padding: 10px 12px; border: 1px solid var(--vg-border); border-radius: 8px; color: var(--vg-text); font-size: 13px; font-weight: 500; text-decoration: none; } ._refLink_fgtuk_3123 span { flex: 1; } ._refLink_fgtuk_3123:hover { border-color: var(--vg-primary-border); color: var(--vg-primary); } ._refAudio_fgtuk_3167 { display: flex; flex-direction: column; gap: 8px; } ._refAudio_fgtuk_3167 audio { width: 100%; height: 36px; } ._refLinkLabel_fgtuk_3189 { display: inline-flex; align-items: center; gap: 6px; font-size: 13px; font-weight: 500; } /* ====================================================== CONFIRM MODAL ====================================================== */ ._confirmModal_fgtuk_3213 { align-items: center; max-width: 420px; padding: 28px 24px 22px; text-align: center; gap: 8px; } ._confirmIcon_fgtuk_3229 { display: inline-flex; align-items: center; justify-content: center; width: 52px; height: 52px; margin-bottom: 6px; border-radius: 50%; background: var(--vg-danger-soft); color: var(--vg-danger); } ._confirmTitle_fgtuk_3253 { margin: 0; font-size: 18px; font-weight: 700; } ._confirmMessage_fgtuk_3265 { margin: 0 0 8px; color: var(--vg-muted); font-size: 14px; line-height: 1.55; } ._confirmActions_fgtuk_3279 { display: flex; gap: 10px; width: 100%; margin-top: 10px; } ._confirmActions_fgtuk_3279 > button { flex: 1; justify-content: center; display: inline-flex; align-items: center; gap: 6px; } /* ====================================================== ANIMATIONS ====================================================== */ @keyframes _vgSpin_fgtuk_1 { to { transform: rotate(360deg); } } @keyframes _vgFadeIn_fgtuk_1 { from { opacity: 0; } to { opacity: 1; } } @keyframes _vgSlideUp_fgtuk_1 { from { opacity: 0; transform: translateY(12px) scale(0.99); } to { opacity: 1; transform: translateY(0) scale(1); } } @keyframes _vgShimmer_fgtuk_1 { 0% { background-position: 100% 50%; } 100% { background-position: 0 50%; } } @keyframes _vgPulse_fgtuk_1 { 0%, 100% { opacity: 1; } 50% { opacity: 0.3; } } @keyframes _vgGlow_fgtuk_1 { 0% { box-shadow: 0 0 0 0 rgba(165, 180, 252, 0.55); } 100% { box-shadow: 0 0 0 22px rgba(165, 180, 252, 0); } } @keyframes _vgIndeterminate_fgtuk_1 { 0% { left: -40%; } 100% { left: 100%; } } /* ====================================================== RESPONSIVE ====================================================== */ @media (max-width: 900px) { ._createLayout_fgtuk_1717, ._detailsLayout_fgtuk_1719 { grid-template-columns: 1fr; } ._createSide_fgtuk_1749, ._detailsSide_fgtuk_1751 { position: static; } ._modalTitle_fgtuk_1537 { max-width: 100%; } } @media (max-width: 768px) { ._page_fgtuk_13 { padding: 72px 16px 16px; /* space for the mobile hamburger */ } ._pageHeader_fgtuk_75 > .app-btn { width: 100%; justify-content: center; } ._searchBox_fgtuk_201 { max-width: none; flex-basis: 100%; } ._filterPills_fgtuk_301 { flex-wrap: nowrap; overflow-x: auto; scrollbar-width: none; } ._filterPill_fgtuk_301 { flex-shrink: 0; } ._selectionActions_fgtuk_525 { margin-left: 0; width: 100%; justify-content: flex-end; } ._modalOverlay_fgtuk_1391 { align-items: flex-end; padding: 0; } ._modal_fgtuk_1391 { max-height: 94vh; border-radius: 18px 18px 0 0; } ._confirmModal_fgtuk_3213 { border-radius: 18px 18px 0 0; } ._modalHeader_fgtuk_1473, ._modalBody_fgtuk_1607, ._modalFooter_fgtuk_1621 { padding-left: 16px; padding-right: 16px; } ._footerHint_fgtuk_1643 { display: none; } ._footerActions_fgtuk_1659 { width: 100%; } ._footerActions_fgtuk_1659 > * { flex: 1; justify-content: center; } }/* ===================================================== WebsiteAnalysis.module.css Layout uses the Bootstrap grid (row / col-*); this file handles the look and the responsive details. ===================================================== */ ._page_f794e_13 { --wa-text: #0f172a; --wa-text-2: #334155; --wa-muted: #64748b; --wa-border: #e5e7eb; --wa-blue: #2563eb; --wa-blue-dark: #1d4ed8; --wa-green: #16a34a; --wa-radius: 14px; display: grid; gap: 16px; color: var(--wa-text); font-size: 13px; padding: 10px; } ._page_f794e_13 * { box-sizing: border-box; } ._nowrap_f794e_55 { white-space: nowrap; } /* ---------- Tones ---------- */ ._tone_blue_f794e_67 { --tone-bg: #eff4ff; --tone-border: #dbe6ff; --tone-icon-bg: #dbeafe; --tone-icon: #2563eb; } ._tone_green_f794e_79 { --tone-bg: #effbf3; --tone-border: #d3f2de; --tone-icon-bg: #d1fae5; --tone-icon: #16a34a; } ._tone_orange_f794e_91 { --tone-bg: #fff6ec; --tone-border: #ffe5c7; --tone-icon-bg: #ffedd5; --tone-icon: #ea580c; } ._tone_purple_f794e_103 { --tone-bg: #f5f1ff; --tone-border: #e5dcff; --tone-icon-bg: #ede9fe; --tone-icon: #7c3aed; } /* ---------- Page header ---------- */ ._pageHead_f794e_121 { display: flex; flex-wrap: wrap; align-items: flex-start; justify-content: space-between; gap: 12px; } ._pageHeadText_f794e_137 { min-width: 0; flex: 1 1 300px; } ._title_f794e_147 { margin: 0; font-size: 24px; font-weight: 700; line-height: 1.25; } ._subtitle_f794e_161 { margin: 4px 0 0; color: var(--wa-muted); font-size: 13.5px; } ._headActions_f794e_173 { display: flex; flex-wrap: wrap; gap: 10px; } /* ---------- Buttons ---------- */ ._btnPrimary_f794e_189, ._btnOutlinePrimary_f794e_191, ._btnSmallOutline_f794e_193, ._toolBtn_f794e_195 { display: inline-flex; align-items: center; justify-content: center; gap: 8px; font-weight: 600; white-space: nowrap; cursor: pointer; transition: background 0.15s ease, border-color 0.15s ease; } ._btnPrimary_f794e_189, ._btnOutlinePrimary_f794e_191, ._toolBtn_f794e_195 { height: 42px; padding: 0 16px; border-radius: 8px; font-size: 13px; } ._btnPrimary_f794e_189 { border: 1px solid var(--wa-blue); background: var(--wa-blue); color: #fff; } ._btnPrimary_f794e_189:hover:not(:disabled) { background: var(--wa-blue-dark); border-color: var(--wa-blue-dark); } ._btnOutlinePrimary_f794e_191 { border: 1px solid #bcd0fb; background: #fff; color: var(--wa-blue); } ._btnOutlinePrimary_f794e_191:hover { background: #eff4ff; } ._toolBtn_f794e_195 { border: 1px solid var(--wa-border); background: #fff; color: var(--wa-text-2); font-weight: 500; } ._toolBtn_f794e_195:hover:not(:disabled) { background: #f8fafc; } ._toolBtn_f794e_195:disabled, ._btnPrimary_f794e_189:disabled { opacity: 0.7; cursor: not-allowed; } ._btnSmallOutline_f794e_193 { height: 34px; padding: 0 14px; border: 1px solid #bcd0fb; border-radius: 8px; background: #fff; color: var(--wa-blue); font-size: 12.5px; } ._btnSmallOutline_f794e_193:hover { background: #eff4ff; } ._btnPrimary_f794e_189:focus-visible, ._btnOutlinePrimary_f794e_191:focus-visible, ._btnSmallOutline_f794e_193:focus-visible, ._toolBtn_f794e_195:focus-visible, ._recommendBtn_f794e_351:focus-visible, ._compActions_f794e_353 button:focus-visible { outline: 2px solid var(--wa-blue); outline-offset: 2px; } ._spin_f794e_363 { animation: _wa-spin_f794e_1 0.9s linear infinite; } @keyframes _wa-spin_f794e_1 { to { transform: rotate(360deg); } } @media (prefers-reduced-motion: reduce) { ._spin_f794e_363 { animation: none; } } /* ---------- My website + toolbar ---------- */ ._topBar_f794e_399 { display: flex; flex-wrap: wrap; align-items: stretch; justify-content: space-between; gap: 12px; } ._siteCard_f794e_415 { display: flex; align-items: center; gap: 12px; padding: 12px 16px; border: 1px solid var(--wa-border); border-radius: 12px; background: #fff; } ._siteIcon_f794e_435 { display: inline-grid; place-items: center; flex: none; width: 42px; height: 42px; border-radius: 50%; background: #dbeafe; color: var(--wa-blue); font-size: 20px; } ._siteText_f794e_459 p { margin: 0; color: var(--wa-muted); font-size: 12px; } ._siteText_f794e_459 strong { font-size: 17px; font-weight: 700; } ._primaryBadge_f794e_481 { padding: 3px 10px; border-radius: 6px; background: #dcfce7; color: #15803d; font-size: 11.5px; font-weight: 600; white-space: nowrap; } ._toolbar_f794e_501 { display: flex; flex-wrap: wrap; align-items: center; gap: 10px; } ._selectBtn_f794e_515 { position: relative; padding-right: 12px; } ._selectBtn_f794e_515 select { appearance: none; border: 0; background: transparent; color: inherit; font: inherit; padding-right: 4px; cursor: pointer; } ._selectBtn_f794e_515 select:focus { outline: none; } ._selectBtn_f794e_515:focus-within { outline: 2px solid var(--wa-blue); outline-offset: 2px; } ._menuWrap_f794e_563 { position: relative; } ._menu_f794e_563 { position: absolute; top: calc(100% + 6px); right: 0; z-index: 40; min-width: 220px; padding: 8px; border: 1px solid var(--wa-border); border-radius: 10px; background: #fff; box-shadow: 0 12px 28px rgba(15, 23, 42, 0.14); } ._menuHead_f794e_597 { margin: 4px 8px 8px; color: var(--wa-muted); font-size: 11.5px; font-weight: 700; letter-spacing: 0.04em; text-transform: uppercase; } ._menuItem_f794e_615 { display: flex; align-items: center; gap: 10px; padding: 8px; border-radius: 6px; font-size: 13px; cursor: pointer; } ._menuItem_f794e_615:hover { background: #f8fafc; } ._menuDot_f794e_643 { width: 9px; height: 9px; border-radius: 50%; } /* ---------- Stat cards ---------- */ ._statCard_f794e_659 { display: flex; align-items: flex-start; gap: 14px; height: 100%; padding: 16px; border: 1px solid var(--tone-border); border-radius: 12px; background: var(--tone-bg); } ._statIcon_f794e_681 { display: inline-grid; place-items: center; flex: none; width: 44px; height: 44px; border-radius: 12px; background: var(--tone-icon-bg); color: var(--tone-icon); font-size: 22px; } ._statBody_f794e_705 { min-width: 0; } ._statLabel_f794e_713 { margin: 0; color: var(--wa-muted); font-size: 13px; } ._statValue_f794e_725 { margin: 2px 0; font-size: 26px; font-weight: 700; line-height: 1.2; } ._statUnit_f794e_739 { color: var(--wa-muted); font-size: 16px; font-weight: 500; } ._statFoot_f794e_751 { display: inline-flex; align-items: center; gap: 4px; margin: 0; color: var(--wa-green); font-size: 12.5px; font-weight: 600; } /* ---------- Panels ---------- */ ._panel_f794e_775 { min-width: 0; padding: 18px; border: 1px solid var(--wa-border); border-radius: var(--wa-radius); background: #fff; box-shadow: 0 1px 2px rgba(15, 23, 42, 0.04); } ._panelHead_f794e_793 { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 10px; } ._panelTitle_f794e_809 { display: flex; align-items: center; gap: 8px; margin: 0; font-size: 16px; font-weight: 700; } ._panelSub_f794e_827 { margin: 10px 0 0; padding-bottom: 8px; border-bottom: 1px solid var(--wa-border); color: var(--wa-text-2); font-size: 12.5px; font-weight: 500; } ._sparkle_f794e_845 { color: var(--wa-blue); } /* ---------- Competitor list ---------- */ ._compList_f794e_857 { margin: 0; padding: 0; list-style: none; } ._compItem_f794e_869 { padding: 14px 0; } ._compItem_f794e_869 + ._compItem_f794e_869 { border-top: 1px solid #f1f5f9; } ._compTop_f794e_885 { display: flex; align-items: center; gap: 12px; } ._avatar_f794e_897 { display: inline-grid; place-items: center; flex: none; width: 40px; height: 40px; border-radius: 50%; font-size: 16px; font-weight: 700; } ._compText_f794e_919 { display: grid; flex: 1; min-width: 0; } ._compText_f794e_919 strong { font-size: 14px; } ._compText_f794e_919 small { overflow: hidden; color: var(--wa-muted); font-size: 12px; text-overflow: ellipsis; white-space: nowrap; } ._badgeActive_f794e_955, ._badgeInactive_f794e_957 { flex: none; padding: 2px 12px; border-radius: 6px; font-size: 11.5px; font-weight: 600; } ._badgeActive_f794e_955 { background: #dcfce7; color: #15803d; } ._badgeInactive_f794e_957 { background: #f1f5f9; color: var(--wa-muted); } ._compActions_f794e_353 { display: flex; flex-wrap: wrap; gap: 6px 14px; margin-top: 10px; } ._compActions_f794e_353 button { display: inline-flex; align-items: center; gap: 6px; padding: 4px 2px; border: 0; border-radius: 4px; background: none; color: var(--wa-text-2); font-size: 12.5px; font-weight: 500; cursor: pointer; } ._compActions_f794e_353 button:hover { color: var(--wa-blue); } ._compActions_f794e_353 ._danger_f794e_1043 { color: #dc2626; } ._compActions_f794e_353 ._danger_f794e_1043:hover { color: #b91c1c; } /* ---------- Comparison table ---------- */ ._legend_f794e_1063 { display: flex; flex-wrap: wrap; gap: 6px 18px; margin: 12px 0; padding: 0; list-style: none; color: var(--wa-text-2); font-size: 12px; } ._legend_f794e_1063 li { display: inline-flex; align-items: center; gap: 6px; } ._legendDot_f794e_1097 { width: 9px; height: 9px; border-radius: 50%; } ._tableScroll_f794e_1109 { border: 1px solid var(--wa-border); border-radius: 10px; } ._cmpTable_f794e_1119 { min-width: 460px; margin: 0; font-size: 13px; --bs-table-bg: transparent; } ._cmpTable_f794e_1119 th, ._cmpTable_f794e_1119 td { padding: 10px 12px; border-color: var(--wa-border); text-align: center; vertical-align: middle; } ._cmpTable_f794e_1119 thead th { background: #f8fafc; font-size: 12.5px; font-weight: 600; } ._cmpTable_f794e_1119 tbody th { font-weight: 500; text-align: left; } ._stickyCol_f794e_1171 { position: sticky; left: 0; z-index: 1; background: #fff; } ._cmpTable_f794e_1119 thead ._stickyCol_f794e_1171 { background: #f8fafc; text-align: left; } ._metricName_f794e_1195 { display: inline-flex; align-items: center; gap: 10px; white-space: nowrap; } ._metricName_f794e_1195 svg { flex: none; font-size: 16px; } ._colMe_f794e_1219 { background: #eef4ff !important; color: var(--wa-blue); font-weight: 700; } /* ---------- Insights ---------- */ ._insightPanel_f794e_1235 { display: flex; flex-direction: column; } ._insightList_f794e_1245 { display: grid; gap: 14px; margin: 16px 0; padding: 0; list-style: none; } ._insightItem_f794e_1261 { display: flex; align-items: flex-start; gap: 12px; } ._insightIcon_f794e_1273 { display: inline-grid; place-items: center; flex: none; width: 40px; height: 40px; border-radius: 10px; background: var(--tone-icon-bg); color: var(--tone-icon); font-size: 18px; } ._insightItem_f794e_1261 strong { display: block; font-size: 13.5px; font-weight: 600; } ._insightItem_f794e_1261 p { margin: 2px 0 0; color: var(--wa-muted); font-size: 12.5px; line-height: 1.45; } ._recommendBtn_f794e_351 { display: flex; align-items: center; justify-content: space-between; gap: 8px; width: 100%; margin-top: auto; padding: 11px 14px; border: 1px solid var(--wa-border); border-radius: 8px; background: #fff; color: var(--wa-text); font-size: 13px; font-weight: 600; text-align: left; cursor: pointer; } ._recommendBtn_f794e_351:hover { background: #f8fafc; } /* ---------- Recent reports (CommonTable) ---------- */ ._reportsTable_f794e_1371 { margin-top: 12px; min-width: 0; } ._reportName_f794e_1381 { display: inline-flex; align-items: center; gap: 10px; font-weight: 500; white-space: nowrap; } ._reportIcon_f794e_1397 { display: inline-grid; place-items: center; flex: none; width: 26px; height: 26px; border-radius: 6px; font-size: 14px; } ._iconBlue_f794e_1417 { background: #dbeafe; color: #2563eb; } ._iconRed_f794e_1425 { background: #fee2e2; color: #dc2626; } ._iconPurple_f794e_1433 { background: #ede9fe; color: #7c3aed; } ._typeBadge_f794e_1443, ._doneBadge_f794e_1445 { display: inline-block; padding: 2px 12px; border-radius: 6px; font-size: 11.5px; font-weight: 600; white-space: nowrap; } ._typeBlue_f794e_1463 { background: #dbeafe; color: #1d4ed8; } ._typePurple_f794e_1471 { background: #ede9fe; color: #6d28d9; } ._typeOrange_f794e_1479 { background: #ffedd5; color: #c2410c; } ._typeTeal_f794e_1487 { background: #ccfbf1; color: #0f766e; } ._doneBadge_f794e_1445 { background: #dcfce7; color: #15803d; } /* ---------- Responsive ---------- */ @media (max-width: 991.98px) { ._topBar_f794e_399 { flex-direction: column; align-items: stretch; } ._toolbar_f794e_501 > * { flex: 1 1 auto; } } @media (max-width: 767.98px) { ._title_f794e_147 { font-size: 20px; } ._panel_f794e_775 { padding: 14px; } ._headActions_f794e_173 { width: 100%; } ._headActions_f794e_173 > button { flex: 1 1 150px; } ._siteCard_f794e_415 { flex-wrap: wrap; } ._statValue_f794e_725 { font-size: 24px; } ._menu_f794e_563 { right: auto; left: 0; } } @media (max-width: 575.98px) { ._page_f794e_13 { gap: 12px; } ._toolbar_f794e_501 > * { flex: 1 1 100%; } ._selectBtn_f794e_515 select { flex: 1; } ._statCard_f794e_659 { padding: 14px; } } /* ===================================================== CompetitorAddEdit.module.css Same structure as modal.module.css (overlay / panel / header / body / footer). Layout uses the Bootstrap grid. ===================================================== */ ._overlay_9qr98_13 { --ce-text: #0f172a; --ce-text-2: #334155; --ce-muted: #64748b; --ce-border: #e2e8f0; --ce-blue: #1d4ed8; --ce-blue-bright: #2563eb; --ce-blue-soft: #eff5ff; position: fixed; inset: 0; z-index: 1050; display: flex; align-items: center; justify-content: center; padding: 16px; background: rgba(15, 23, 42, 0.55); overflow-y: auto; } ._overlay_9qr98_13 * { box-sizing: border-box; } ._panel_9qr98_61 { display: flex; flex-direction: column; width: min(980px, 100%); max-height: calc(100vh - 32px); border-radius: 16px; background: #fff; color: var(--ce-text); font-size: 13px; box-shadow: 0 24px 60px rgba(15, 23, 42, 0.3); overflow: hidden; } /* ---------- Header ---------- */ ._header_9qr98_91 { display: flex; align-items: flex-start; justify-content: space-between; gap: 16px; padding: 22px 28px 14px; } ._titleWrap_9qr98_107 { min-width: 0; } ._title_9qr98_107 { margin: 0; font-size: 24px; font-weight: 700; line-height: 1.25; } ._subtitle_9qr98_129 { margin: 4px 0 0; color: var(--ce-muted); font-size: 13.5px; } ._closeBtn_9qr98_141 { display: inline-grid; place-items: center; flex: none; width: 36px; height: 36px; border: 0; border-radius: 8px; background: transparent; color: var(--ce-text-2); cursor: pointer; } ._closeBtn_9qr98_141:hover:not(:disabled) { background: #f1f5f9; } ._closeBtn_9qr98_141:disabled { opacity: 0.5; cursor: not-allowed; } /* ---------- Form / body ---------- */ ._form_9qr98_189 { display: flex; flex: 1; flex-direction: column; min-height: 0; } ._body_9qr98_203 { flex: 1; padding: 6px 28px 20px; overflow-y: auto; } /* ---------- Promo column ---------- */ ._promo_9qr98_219 { height: 100%; padding: 18px; border-radius: 14px; background: linear-gradient(180deg, #eef4ff 0%, #f6f9ff 100%); } ._illustration_9qr98_233 { display: block; width: 100%; max-width: 260px; height: auto; margin: 0 auto 6px; } ._promoTitle_9qr98_249 { margin: 4px 0 6px; font-size: 19px; font-weight: 700; } ._promoText_9qr98_261 { margin: 0 0 16px; color: var(--ce-text-2); font-size: 14px; line-height: 1.5; } ._featureList_9qr98_275 { display: grid; gap: 14px; margin: 0; padding: 0; list-style: none; } ._featureItem_9qr98_291 { display: flex; align-items: flex-start; gap: 12px; } ._featureItem_9qr98_291 strong { display: block; font-size: 13.5px; font-weight: 600; } ._featureItem_9qr98_291 small { display: block; color: var(--ce-muted); font-size: 12.5px; line-height: 1.4; } ._featureIcon_9qr98_329 { display: inline-grid; place-items: center; flex: none; width: 40px; height: 40px; border-radius: 50%; background: var(--tone-bg); color: var(--tone-fg); font-size: 18px; } ._tone_blue_9qr98_353 { --tone-bg: #dbeafe; --tone-fg: #2563eb; } ._tone_purple_9qr98_361 { --tone-bg: #ede9fe; --tone-fg: #7c3aed; } ._tone_orange_9qr98_369 { --tone-bg: #ffedd5; --tone-fg: #ea580c; } ._tone_green_9qr98_377 { --tone-bg: #dcfce7; --tone-fg: #16a34a; } /* ---------- Fields ---------- */ ._group_9qr98_391 { min-width: 0; margin: 0 0 18px; padding: 0; border: 0; } ._label_9qr98_405 { display: block; float: none; width: auto; margin: 0 0 6px; padding: 0; font-size: 14px; font-weight: 600; line-height: 1.4; } ._required_9qr98_427 { color: #ef4444; } ._inputWrap_9qr98_435 { position: relative; } ._inputWrap_9qr98_435 > svg { position: absolute; top: 50%; left: 14px; transform: translateY(-50%); color: var(--ce-muted); font-size: 18px; pointer-events: none; } ._inputWrap_9qr98_435 .form-control { height: 46px; padding: 0 14px 0 44px; border: 1px solid var(--ce-border); border-radius: 10px; background: #fff; color: var(--ce-text); font-size: 14.5px; } ._inputWrap_9qr98_435 .form-control::placeholder { color: #94a3b8; } ._inputWrap_9qr98_435 .form-control:focus { border-color: var(--ce-blue-bright); box-shadow: 0 0 0 3px rgba(37, 99, 235, 0.15); } ._inputWrap_9qr98_435 .form-control:disabled { background: #f8fafc; cursor: not-allowed; } ._inputWrapError_9qr98_511 .form-control { border-color: #ef4444; } ._helper_9qr98_519 { margin: 6px 0 0; color: var(--ce-muted); font-size: 12.5px; } ._fieldError_9qr98_531 { margin: 6px 0 0; color: #dc2626; font-size: 12.5px; } ._serverError_9qr98_543 { margin-bottom: 14px; padding: 10px 12px; border: 1px solid #fecaca; border-radius: 8px; background: #fef2f2; color: #b91c1c; font-size: 13px; } /* ---------- Radio cards ---------- */ ._radioCard_9qr98_567 { position: relative; display: flex; align-items: center; gap: 12px; height: 100%; min-height: 64px; padding: 10px 14px; border: 1px solid var(--ce-border); border-radius: 10px; background: #fff; cursor: pointer; transition: border-color 0.15s ease, background-color 0.15s ease; } ._radioCard_9qr98_567:hover { border-color: #b9cdfa; } ._radioCardActive_9qr98_609, ._radioCardActive_9qr98_609:hover { border: 2px solid var(--ce-blue-bright); padding: 9px 13px; background: var(--ce-blue-soft); } ._radioCardDisabled_9qr98_623 { opacity: 0.6; cursor: not-allowed; } /* real radio stays for keyboard + screen readers, visually hidden */ ._radioInput_9qr98_635 { position: absolute; inset: 0; margin: 0; opacity: 0; cursor: inherit; } ._radioCard_9qr98_567:has(._radioInput_9qr98_635:focus-visible) { outline: 2px solid var(--ce-blue-bright); outline-offset: 2px; } ._radioMark_9qr98_661 { display: inline-grid; place-items: center; flex: none; width: 22px; height: 22px; border: 2px solid #cbd5e1; border-radius: 50%; background: #fff; } ._radioCardActive_9qr98_609 ._radioMark_9qr98_661 { border-color: var(--ce-blue-bright); box-shadow: inset 0 0 0 4px var(--ce-blue-bright); } /* status cards draw a coloured dot instead of the ring fill */ ._statusDot_9qr98_695 { width: 20px; height: 20px; border-radius: 50%; } ._radioMark_9qr98_661:has(._statusDot_9qr98_695) { width: 22px; height: 22px; border: 0; background: transparent; box-shadow: none !important; } ._radioText_9qr98_723 { display: grid; min-width: 0; } ._radioText_9qr98_723 strong { font-size: 14px; font-weight: 600; } ._radioText_9qr98_723 small { color: var(--ce-muted); font-size: 12px; line-height: 1.35; } /* ---------- Info box ---------- */ ._infoBox_9qr98_759 { display: flex; align-items: flex-start; gap: 12px; padding: 14px 16px; border-radius: 10px; background: var(--ce-blue-soft); color: var(--ce-text-2); } ._infoBox_9qr98_759 > svg { flex: none; margin-top: 2px; color: var(--ce-blue-bright); font-size: 20px; } ._infoBox_9qr98_759 p { margin: 0; font-size: 13.5px; } ._linkBtn_9qr98_803 { display: inline-flex; align-items: center; gap: 6px; margin-top: 4px; padding: 0; border: 0; background: none; color: var(--ce-blue-bright); font-size: 13.5px; font-weight: 600; cursor: pointer; } ._linkBtn_9qr98_803:hover { text-decoration: underline; } /* ---------- Footer ---------- */ ._footer_9qr98_843 { display: flex; align-items: center; justify-content: flex-end; gap: 12px; padding: 14px 28px 18px; border-top: 1px solid var(--ce-border); background: #fff; } ._btnSecondary_9qr98_863, ._btnPrimary_9qr98_865 { display: inline-flex; align-items: center; justify-content: center; gap: 8px; height: 46px; padding: 0 24px; border-radius: 10px; font-size: 14.5px; font-weight: 600; white-space: nowrap; cursor: pointer; } ._btnSecondary_9qr98_863 { border: 1px solid var(--ce-border); background: #fff; color: var(--ce-text); } ._btnSecondary_9qr98_863:hover:not(:disabled) { background: #f8fafc; } ._btnPrimary_9qr98_865 { min-width: 190px; border: 0; background: var(--ce-blue-bright); color: #fff; } ._btnPrimary_9qr98_865:hover:not(:disabled) { background: var(--ce-blue); } ._btnSecondary_9qr98_863:disabled, ._btnPrimary_9qr98_865:disabled { opacity: 0.6; cursor: not-allowed; } ._btnSecondary_9qr98_863:focus-visible, ._btnPrimary_9qr98_865:focus-visible, ._linkBtn_9qr98_803:focus-visible, ._closeBtn_9qr98_141:focus-visible { outline: 2px solid var(--ce-blue-bright); outline-offset: 2px; } /* ---------- Responsive ---------- */ @media (max-width: 767.98px) { ._overlay_9qr98_13 { align-items: flex-end; padding: 0; } /* bottom sheet on phones */ ._panel_9qr98_61 { width: 100%; max-height: 94vh; border-radius: 16px 16px 0 0; } ._header_9qr98_91 { padding: 18px 16px 10px; } ._title_9qr98_107 { font-size: 20px; } ._body_9qr98_203 { padding: 4px 16px 16px; } ._footer_9qr98_843 { padding: 12px 16px 16px; } ._footer_9qr98_843 > button { flex: 1; min-width: 0; } } @media (max-width: 380px) { ._footer_9qr98_843 { flex-direction: column-reverse; } ._footer_9qr98_843 > button { width: 100%; } } /* ===================================================== SetupWebsite.module.css Same structure as modal.module.css (overlay / panel / header / body / footer). Layout uses the Bootstrap grid. ===================================================== */ ._overlay_1bz6s_13 { --ce-text: #0f172a; --ce-text-2: #334155; --ce-muted: #64748b; --ce-border: #e2e8f0; --ce-blue: #1d4ed8; --ce-blue-bright: #2563eb; --ce-blue-soft: #eff5ff; position: fixed; inset: 0; z-index: 1050; display: flex; align-items: center; justify-content: center; padding: 16px; background: rgba(15, 23, 42, 0.55); overflow-y: auto; } ._overlay_1bz6s_13 * { box-sizing: border-box; } ._panel_1bz6s_61 { display: flex; flex-direction: column; width: min(980px, 100%); max-height: calc(100vh - 32px); border-radius: 16px; background: #fff; color: var(--ce-text); font-size: 13px; box-shadow: 0 24px 60px rgba(15, 23, 42, 0.3); overflow: hidden; } /* ---------- Header ---------- */ ._header_1bz6s_91 { display: flex; align-items: flex-start; justify-content: space-between; gap: 16px; padding: 22px 28px 14px; } ._titleWrap_1bz6s_107 { min-width: 0; } ._title_1bz6s_107 { margin: 0; font-size: 24px; font-weight: 700; line-height: 1.25; } ._subtitle_1bz6s_129 { margin: 4px 0 0; color: var(--ce-muted); font-size: 13.5px; } ._closeBtn_1bz6s_141 { display: inline-grid; place-items: center; flex: none; width: 36px; height: 36px; border: 0; border-radius: 8px; background: transparent; color: var(--ce-text-2); cursor: pointer; } ._closeBtn_1bz6s_141:hover:not(:disabled) { background: #f1f5f9; } ._closeBtn_1bz6s_141:disabled { opacity: 0.5; cursor: not-allowed; } /* ---------- Form / body ---------- */ ._form_1bz6s_189 { display: flex; flex: 1; flex-direction: column; min-height: 0; } ._body_1bz6s_203 { flex: 1; padding: 6px 28px 20px; overflow-y: auto; } /* ---------- Promo column ---------- */ ._promo_1bz6s_219 { height: 100%; padding: 18px; border-radius: 14px; background: linear-gradient(180deg, #eef4ff 0%, #f6f9ff 100%); } ._illustration_1bz6s_233 { display: block; width: 100%; max-width: 260px; height: auto; margin: 0 auto 6px; } ._promoTitle_1bz6s_249 { margin: 4px 0 6px; font-size: 19px; font-weight: 700; } ._promoText_1bz6s_261 { margin: 0 0 16px; color: var(--ce-text-2); font-size: 14px; line-height: 1.5; } ._featureList_1bz6s_275 { display: grid; gap: 14px; margin: 0; padding: 0; list-style: none; } ._featureItem_1bz6s_291 { display: flex; align-items: flex-start; gap: 12px; } ._featureItem_1bz6s_291 strong { display: block; font-size: 13.5px; font-weight: 600; } ._featureItem_1bz6s_291 small { display: block; color: var(--ce-muted); font-size: 12.5px; line-height: 1.4; } ._featureIcon_1bz6s_329 { display: inline-grid; place-items: center; flex: none; width: 40px; height: 40px; border-radius: 50%; background: var(--tone-bg); color: var(--tone-fg); font-size: 18px; } ._tone_blue_1bz6s_353 { --tone-bg: #dbeafe; --tone-fg: #2563eb; } ._tone_purple_1bz6s_361 { --tone-bg: #ede9fe; --tone-fg: #7c3aed; } ._tone_orange_1bz6s_369 { --tone-bg: #ffedd5; --tone-fg: #ea580c; } ._tone_green_1bz6s_377 { --tone-bg: #dcfce7; --tone-fg: #16a34a; } /* ---------- Fields ---------- */ ._group_1bz6s_391 { min-width: 0; margin: 0 0 18px; padding: 0; border: 0; } ._label_1bz6s_405 { display: block; float: none; width: auto; margin: 0 0 6px; padding: 0; font-size: 14px; font-weight: 600; line-height: 1.4; } ._required_1bz6s_427 { color: #ef4444; } ._inputWrap_1bz6s_435 { position: relative; } ._inputWrap_1bz6s_435 > svg { position: absolute; top: 50%; left: 14px; transform: translateY(-50%); color: var(--ce-muted); font-size: 18px; pointer-events: none; } ._inputWrap_1bz6s_435 .form-control { height: 46px; padding: 0 14px 0 44px; border: 1px solid var(--ce-border); border-radius: 10px; background: #fff; color: var(--ce-text); font-size: 14.5px; } ._inputWrap_1bz6s_435 .form-control::placeholder { color: #94a3b8; } ._inputWrap_1bz6s_435 .form-control:focus { border-color: var(--ce-blue-bright); box-shadow: 0 0 0 3px rgba(37, 99, 235, 0.15); } ._inputWrap_1bz6s_435 .form-control:disabled { background: #f8fafc; cursor: not-allowed; } ._inputWrapError_1bz6s_511 .form-control { border-color: #ef4444; } ._helper_1bz6s_519 { margin: 6px 0 0; color: var(--ce-muted); font-size: 12.5px; } ._fieldError_1bz6s_531 { margin: 6px 0 0; color: #dc2626; font-size: 12.5px; } ._serverError_1bz6s_543 { margin-bottom: 14px; padding: 10px 12px; border: 1px solid #fecaca; border-radius: 8px; background: #fef2f2; color: #b91c1c; font-size: 13px; } /* ---------- Radio cards ---------- */ ._radioCard_1bz6s_567 { position: relative; display: flex; align-items: center; gap: 12px; height: 100%; min-height: 64px; padding: 10px 14px; border: 1px solid var(--ce-border); border-radius: 10px; background: #fff; cursor: pointer; transition: border-color 0.15s ease, background-color 0.15s ease; } ._radioCard_1bz6s_567:hover { border-color: #b9cdfa; } ._radioCardActive_1bz6s_609, ._radioCardActive_1bz6s_609:hover { border: 2px solid var(--ce-blue-bright); padding: 9px 13px; background: var(--ce-blue-soft); } ._radioCardDisabled_1bz6s_623 { opacity: 0.6; cursor: not-allowed; } /* real radio stays for keyboard + screen readers, visually hidden */ ._radioInput_1bz6s_635 { position: absolute; inset: 0; margin: 0; opacity: 0; cursor: inherit; } ._radioCard_1bz6s_567:has(._radioInput_1bz6s_635:focus-visible) { outline: 2px solid var(--ce-blue-bright); outline-offset: 2px; } ._radioMark_1bz6s_661 { display: inline-grid; place-items: center; flex: none; width: 22px; height: 22px; border: 2px solid #cbd5e1; border-radius: 50%; background: #fff; } ._radioCardActive_1bz6s_609 ._radioMark_1bz6s_661 { border-color: var(--ce-blue-bright); box-shadow: inset 0 0 0 4px var(--ce-blue-bright); } /* status cards draw a coloured dot instead of the ring fill */ ._statusDot_1bz6s_695 { width: 20px; height: 20px; border-radius: 50%; } ._radioMark_1bz6s_661:has(._statusDot_1bz6s_695) { width: 22px; height: 22px; border: 0; background: transparent; box-shadow: none !important; } ._radioText_1bz6s_723 { display: grid; min-width: 0; } ._radioText_1bz6s_723 strong { font-size: 14px; font-weight: 600; } ._radioText_1bz6s_723 small { color: var(--ce-muted); font-size: 12px; line-height: 1.35; } /* ---------- Info box ---------- */ ._infoBox_1bz6s_759 { display: flex; align-items: flex-start; gap: 12px; padding: 14px 16px; border-radius: 10px; background: var(--ce-blue-soft); color: var(--ce-text-2); } ._infoBox_1bz6s_759 > svg { flex: none; margin-top: 2px; color: var(--ce-blue-bright); font-size: 20px; } ._infoBox_1bz6s_759 p { margin: 0; font-size: 13.5px; } ._linkBtn_1bz6s_803 { display: inline-flex; align-items: center; gap: 6px; margin-top: 4px; padding: 0; border: 0; background: none; color: var(--ce-blue-bright); font-size: 13.5px; font-weight: 600; cursor: pointer; } ._linkBtn_1bz6s_803:hover { text-decoration: underline; } /* ---------- Footer ---------- */ ._footer_1bz6s_843 { display: flex; align-items: center; justify-content: flex-end; gap: 12px; padding: 14px 28px 18px; border-top: 1px solid var(--ce-border); background: #fff; } ._btnSecondary_1bz6s_863, ._btnPrimary_1bz6s_865 { display: inline-flex; align-items: center; justify-content: center; gap: 8px; height: 46px; padding: 0 24px; border-radius: 10px; font-size: 14.5px; font-weight: 600; white-space: nowrap; cursor: pointer; } ._btnSecondary_1bz6s_863 { border: 1px solid var(--ce-border); background: #fff; color: var(--ce-text); } ._btnSecondary_1bz6s_863:hover:not(:disabled) { background: #f8fafc; } ._btnPrimary_1bz6s_865 { min-width: 190px; border: 0; background: var(--ce-blue-bright); color: #fff; } ._btnPrimary_1bz6s_865:hover:not(:disabled) { background: var(--ce-blue); } ._btnSecondary_1bz6s_863:disabled, ._btnPrimary_1bz6s_865:disabled { opacity: 0.6; cursor: not-allowed; } ._btnSecondary_1bz6s_863:focus-visible, ._btnPrimary_1bz6s_865:focus-visible, ._linkBtn_1bz6s_803:focus-visible, ._closeBtn_1bz6s_141:focus-visible { outline: 2px solid var(--ce-blue-bright); outline-offset: 2px; } /* ---------- Responsive ---------- */ @media (max-width: 767.98px) { ._overlay_1bz6s_13 { align-items: flex-end; padding: 0; } /* bottom sheet on phones */ ._panel_1bz6s_61 { width: 100%; max-height: 94vh; border-radius: 16px 16px 0 0; } ._header_1bz6s_91 { padding: 18px 16px 10px; } ._title_1bz6s_107 { font-size: 20px; } ._body_1bz6s_203 { padding: 4px 16px 16px; } ._footer_1bz6s_843 { padding: 12px 16px 16px; } ._footer_1bz6s_843 > button { flex: 1; min-width: 0; } } @media (max-width: 380px) { ._footer_1bz6s_843 { flex-direction: column-reverse; } ._footer_1bz6s_843 > button { width: 100%; } } /* ---------- Single-line feature rows (Setup Website) ---------- */ ._featureItem_1bz6s_291 { align-items: center; } ._featureText_1bz6s_1069 { font-size: 13.5px; font-weight: 500; color: var(--ce-text); } ._backdrop_88x0o_1 { position: fixed; inset: 0; background: rgba(15, 23, 42, 0.5); display: flex; align-items: center; justify-content: center; padding: 16px; z-index: 1080; } ._modal_88x0o_23 { background: #fff; width: 100%; max-width: 680px; max-height: 90vh; border-radius: 14px; display: flex; flex-direction: column; box-shadow: 0 20px 50px rgba(15, 23, 42, 0.25); overflow: hidden; } /* ---------- header ---------- */ ._head_88x0o_49 { display: flex; justify-content: space-between; align-items: center; gap: 12px; padding: 16px 20px; border-bottom: 1px solid #e5e7eb; } ._site_88x0o_67 { display: flex; align-items: center; gap: 12px; min-width: 0; } ._siteText_88x0o_79 { min-width: 0; } ._favicon_88x0o_85 { width: 40px; height: 40px; border-radius: 10px; object-fit: contain; background: #f3f4f6; padding: 5px; flex: none; } ._favFallback_88x0o_103 { width: 40px; height: 40px; border-radius: 10px; background: #dbeafe; color: #2563eb; display: grid; place-items: center; flex: none; } ._name_88x0o_123 { margin: 0; font-size: 16px; font-weight: 600; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; } ._domain_88x0o_139 { font-size: 13px; color: #2563eb; text-decoration: none; } ._headRight_88x0o_149 { display: flex; align-items: center; gap: 12px; flex: none; } ._close_88x0o_161 { border: 0; background: transparent; font-size: 20px; cursor: pointer; color: #6b7280; display: grid; } /* score ring */ ._ring_88x0o_181 { position: relative; width: 56px; height: 56px; } ._ring_88x0o_181 svg { display: block; } ._ring_88x0o_181 span { position: absolute; inset: 0; display: grid; place-items: center; font-size: 16px; font-weight: 700; } ._ringTrack_88x0o_213 { fill: none; stroke: #e5e7eb; stroke-width: 5; } ._ringFill_88x0o_223 { fill: none; stroke: currentColor; stroke-width: 5; stroke-linecap: round; transition: stroke-dashoffset 0.4s ease; } /* ---------- tabs ---------- */ ._tabs_88x0o_241 { display: flex; gap: 4px; padding: 0 20px; border-bottom: 1px solid #e5e7eb; } ._tab_88x0o_241 { border: 0; background: transparent; padding: 10px 12px; font-size: 14px; color: #6b7280; cursor: pointer; border-bottom: 2px solid transparent; margin-bottom: -1px; display: inline-flex; align-items: center; gap: 6px; } ._tabOn_88x0o_279 { color: #2563eb; border-bottom-color: #2563eb; font-weight: 600; } ._count_88x0o_289 { background: #fee2e2; color: #b91c1c; font-size: 11px; padding: 0 7px; border-radius: 999px; line-height: 18px; } /* ---------- body ---------- */ ._body_88x0o_309 { padding: 16px 20px; overflow-y: auto; flex: 1; } ._empty_88x0o_319 { padding: 28px 20px; text-align: center; color: #6b7280; margin: 0; } ._hint_88x0o_331 { padding: 24px 8px; text-align: center; color: #6b7280; margin: 0; font-size: 14px; } ._section_88x0o_347 { font-size: 12px; text-transform: uppercase; letter-spacing: 0.05em; color: #6b7280; margin: 20px 0 8px; } /* notice */ ._notice_88x0o_365 { display: flex; gap: 10px; padding: 12px; border-radius: 10px; font-size: 13px; } ._notice_88x0o_365 p { margin: 2px 0 4px; } ._notice_88x0o_365 svg { flex: none; margin-top: 2px; } ._notice_warn_88x0o_393 { background: #fef3c7; color: #92400e; } ._notice_info_88x0o_401 { background: #dbeafe; color: #1e40af; } ._notice_ok_88x0o_409 { background: #dcfce7; color: #166534; } /* summary tiles */ ._tiles_88x0o_421 { list-style: none; padding: 0; margin: 14px 0 0; display: grid; grid-template-columns: repeat(3, 1fr); gap: 8px; } ._tiles_88x0o_421 li { border: 1px solid #e5e7eb; border-radius: 10px; padding: 10px 12px; display: flex; flex-direction: column; } ._tiles_88x0o_421 strong { font-size: 18px; color: #111827; } ._tiles_88x0o_421 span { font-size: 12px; color: #6b7280; } /* score cards */ ._scores_88x0o_471, ._sources_88x0o_473, ._notes_88x0o_475, ._issues_88x0o_477 { list-style: none; padding: 0; margin: 0; } ._scores_88x0o_471 { display: grid; grid-template-columns: repeat(2, 1fr); gap: 10px; } ._scoreCard_88x0o_497 { border: 1px solid #e5e7eb; border-radius: 10px; padding: 10px 12px; } ._scoreTop_88x0o_507 { display: flex; justify-content: space-between; align-items: baseline; gap: 8px; margin-bottom: 6px; font-size: 14px; } ._scoreName_88x0o_523 { color: #374151; } ._scoreTop_88x0o_507 strong { font-size: 18px; } ._scoreMeta_88x0o_535 { display: flex; justify-content: space-between; align-items: center; margin-top: 6px; font-size: 12px; color: #9ca3af; min-height: 16px; } ._estimated_88x0o_553 { background: #f3f4f6; color: #6b7280; padding: 0 8px; border-radius: 999px; font-size: 11px; } ._bar_88x0o_567 { height: 6px; background: #e5e7eb; border-radius: 999px; overflow: hidden; } ._fill_88x0o_579 { display: block; height: 100%; border-radius: 999px; } ._good_88x0o_591 { color: #15803d; } ._warn_88x0o_597 { color: #b45309; } ._bad_88x0o_603 { color: #b91c1c; } ._fill_good_88x0o_609 { background: #16a34a; } ._fill_warn_88x0o_615 { background: #f59e0b; } ._fill_bad_88x0o_621 { background: #ef4444; } /* data sources */ ._sources_88x0o_473 li { padding: 10px 12px; border: 1px solid #e5e7eb; border-radius: 10px; margin-bottom: 8px; font-size: 13px; } ._srcTop_88x0o_645 { display: flex; align-items: center; gap: 8px; margin-bottom: 2px; flex-wrap: wrap; } ._reason_88x0o_659 { margin: 6px 0 0; color: #6b7280; font-size: 12px; } ._pillOn_88x0o_669, ._pillOff_88x0o_671, ._pillWarn_88x0o_673 { font-size: 11px; padding: 1px 8px; border-radius: 999px; } ._pillOn_88x0o_669 { background: #dcfce7; color: #166534; } ._pillOff_88x0o_671 { background: #fee2e2; color: #991b1b; } ._pillWarn_88x0o_673 { background: #fef3c7; color: #92400e; } ._notes_88x0o_475 { margin-top: 14px; font-size: 12px; color: #6b7280; } ._notes_88x0o_475 li { margin-bottom: 4px; } ._notes_88x0o_475 li::before { content: "• "; } /* issues */ ._issue_88x0o_477 { display: flex; align-items: center; gap: 10px; padding: 10px 12px; border: 1px solid #e5e7eb; border-radius: 10px; margin-bottom: 8px; } ._issueText_88x0o_753 { flex: 1; min-width: 0; display: flex; flex-direction: column; } ._issueText_88x0o_753 strong { font-size: 14px; color: #111827; word-break: break-word; } ._issueText_88x0o_753 small { font-size: 12px; color: #6b7280; } ._dot_88x0o_783 { width: 9px; height: 9px; border-radius: 50%; flex: none; } ._dotBad_88x0o_795 { background: #ef4444; } ._dotWarn_88x0o_801 { background: #f59e0b; } ._gain_88x0o_807 { font-size: 12px; font-weight: 600; color: #15803d; background: #dcfce7; padding: 2px 8px; border-radius: 999px; white-space: nowrap; } ._status_88x0o_825 { font-size: 12px; font-weight: 600; color: #b91c1c; background: #fee2e2; padding: 2px 8px; border-radius: 999px; } /* ---------- footer ---------- */ ._foot_88x0o_845 { display: flex; justify-content: flex-end; gap: 8px; padding: 12px 20px; border-top: 1px solid #e5e7eb; } ._btnGhost_88x0o_859, ._btnPrimary_88x0o_861 { display: inline-flex; align-items: center; gap: 6px; padding: 8px 16px; border-radius: 8px; font-size: 14px; cursor: pointer; border: 1px solid #d1d5db; background: #fff; } ._btnPrimary_88x0o_861 { background: #2563eb; border-color: #2563eb; color: #fff; } ._btnPrimary_88x0o_861:disabled { opacity: 0.6; cursor: not-allowed; } ._spin_88x0o_903 { animation: _spin_88x0o_903 0.8s linear infinite; } @keyframes _spin_88x0o_903 { to { transform: rotate(360deg); } } @media (max-width: 560px) { ._tiles_88x0o_421 { grid-template-columns: repeat(2, 1fr); } ._scores_88x0o_471 { grid-template-columns: 1fr; } } /* ---------- overlay + panel ---------- */ ._overlay_1unhn_3 { position: fixed; inset: 0; z-index: 1050; display: grid; place-items: center; padding: 16px; background: rgba(15, 23, 42, 0.45); } ._panel_1unhn_23 { display: flex; flex-direction: column; width: min(860px, 100%); max-height: calc(100vh - 32px); background: #fff; border-radius: 16px; box-shadow: 0 24px 60px rgba(15, 23, 42, 0.25); overflow: hidden; } /* ---------- header ---------- */ ._header_1unhn_47 { display: flex; align-items: center; gap: 12px; padding: 16px 20px; border-bottom: 1px solid #e5e7eb; } ._favicon_1unhn_63 { display: grid; place-items: center; flex: none; width: 40px; height: 40px; border-radius: 50%; background: #eef2ff; color: #4338ca; font-weight: 700; } ._headText_1unhn_87 { flex: 1; min-width: 0; } ._title_1unhn_97 { margin: 0; font-size: 18px; font-weight: 700; color: #0f172a; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; } ._link_1unhn_117 { display: inline-flex; align-items: center; gap: 4px; font-size: 13px; color: #2563eb; text-decoration: none; } ._link_1unhn_117:hover { text-decoration: underline; } ._badgeActive_1unhn_143, ._badgeInactive_1unhn_145 { flex: none; padding: 3px 10px; border-radius: 999px; font-size: 12px; font-weight: 600; } ._badgeActive_1unhn_143 { background: #dcfce7; color: #15803d; } ._badgeInactive_1unhn_145 { background: #f1f5f9; color: #64748b; } ._closeBtn_1unhn_179 { flex: none; display: grid; place-items: center; width: 36px; height: 36px; border: 0; border-radius: 8px; background: transparent; color: #475569; cursor: pointer; } ._closeBtn_1unhn_179:hover { background: #f1f5f9; } /* ---------- body ---------- */ ._body_1unhn_215 { flex: 1; overflow-y: auto; padding: 16px 20px 20px; } ._statusRow_1unhn_227 { display: flex; flex-wrap: wrap; align-items: center; gap: 10px; margin-bottom: 12px; } ._syncPill_1unhn_243 { padding: 3px 10px; border-radius: 999px; font-size: 12px; font-weight: 600; background: #f1f5f9; color: #475569; } ._sync_ok_1unhn_261 { background: #dcfce7; color: #15803d; } ._sync_partial_1unhn_269 { background: #fef3c7; color: #b45309; } ._sync_failed_1unhn_277 { background: #fee2e2; color: #b91c1c; } ._sync_queued_1unhn_285 { background: #e0f2fe; color: #0369a1; } ._muted_1unhn_295 { margin: 0; font-size: 13px; color: #64748b; } ._alertWarn_1unhn_307, ._alertError_1unhn_309 { display: flex; align-items: flex-start; gap: 8px; margin-bottom: 14px; padding: 10px 12px; border-radius: 10px; font-size: 13px; } ._alertWarn_1unhn_307 { background: #fffbeb; color: #92400e; border: 1px solid #fde68a; } ._alertWarn_1unhn_307 svg { flex: none; margin-top: 2px; } ._alertError_1unhn_309 { background: #fef2f2; color: #b91c1c; border: 1px solid #fecaca; } /* ---------- scores ---------- */ ._scoreRow_1unhn_361 { display: grid; grid-template-columns: 170px 1fr; gap: 12px; } ._scoreGrid_1unhn_373 { display: grid; grid-template-columns: repeat(auto-fill, minmax(120px, 1fr)); gap: 10px; } ._scoreCard_1unhn_385 { display: flex; flex-direction: column; gap: 4px; padding: 10px 12px; border: 1px solid #e5e7eb; border-radius: 12px; background: #fff; text-align: left; font: inherit; } ._scoreCard_1unhn_385 small { font-size: 12px; color: #64748b; } ._scoreCardBig_1unhn_417 { justify-content: center; padding: 16px; background: #f8fafc; } ._scoreCardBtn_1unhn_427 { cursor: pointer; } ._scoreCardBtn_1unhn_427:hover { border-color: #93c5fd; } ._scoreCardActive_1unhn_439 { border-color: #2563eb; box-shadow: 0 0 0 1px #2563eb inset; } ._scoreNum_1unhn_449 { font-size: 20px; line-height: 1.1; } ._scoreBig_1unhn_457 { font-size: 38px; line-height: 1; } ._text_good_1unhn_467 { color: #15803d; } ._text_warn_1unhn_473 { color: #b45309; } ._text_bad_1unhn_479 { color: #b91c1c; } ._text_none_1unhn_485 { color: #94a3b8; } ._bar_1unhn_493 { display: block; height: 5px; border-radius: 999px; background: #e2e8f0; overflow: hidden; } ._barFill_1unhn_509 { display: block; height: 100%; border-radius: inherit; } ._bg_good_1unhn_519 { background: #22c55e; } ._bg_warn_1unhn_525 { background: #f59e0b; } ._bg_bad_1unhn_531 { background: #ef4444; } ._bg_none_1unhn_537 { background: #cbd5e1; } /* ---------- sections ---------- */ ._section_1unhn_547 { margin-top: 22px; } ._sectionHead_1unhn_555 { display: flex; align-items: center; gap: 8px; margin-bottom: 8px; } ._sectionHead_1unhn_555 h4 { margin: 0; font-size: 15px; font-weight: 700; color: #0f172a; } ._tag_1unhn_583 { display: inline-block; padding: 1px 8px; border-radius: 999px; background: #f1f5f9; color: #475569; font-size: 12px; font-weight: 600; } ._tabs_1unhn_603 { display: flex; flex-wrap: wrap; gap: 6px; margin: 10px 0; } ._tab_1unhn_603 { padding: 5px 12px; border: 1px solid #e5e7eb; border-radius: 999px; background: #fff; font-size: 13px; color: #334155; cursor: pointer; } ._tab_1unhn_603:hover { border-color: #93c5fd; } ._tabActive_1unhn_643 { background: #2563eb; border-color: #2563eb; color: #fff; } /* ---------- checks ---------- */ ._checkList_1unhn_657 { margin: 0; padding: 0; list-style: none; border: 1px solid #e5e7eb; border-radius: 12px; overflow: hidden; } ._check_1unhn_657 { display: flex; align-items: center; gap: 10px; padding: 9px 12px; border-bottom: 1px solid #f1f5f9; } ._check_1unhn_657:last-child { border-bottom: 0; } ._checkIcon_1unhn_699 { display: grid; flex: none; font-size: 18px; } ._check_pass_1unhn_709 ._checkIcon_1unhn_699 { color: #22c55e; } ._check_partial_1unhn_715 ._checkIcon_1unhn_699 { color: #f59e0b; } ._check_fail_1unhn_721 ._checkIcon_1unhn_699 { color: #ef4444; } ._checkText_1unhn_729 { display: flex; flex: 1; flex-direction: column; min-width: 0; } ._checkText_1unhn_729 strong { font-size: 13px; font-weight: 600; color: #0f172a; } ._checkText_1unhn_729 small { font-size: 12px; color: #64748b; overflow-wrap: anywhere; } ._checkWeight_1unhn_763 { flex: none; font-size: 12px; color: #64748b; font-variant-numeric: tabular-nums; } /* ---------- metrics ---------- */ ._metricGrid_1unhn_779 { display: grid; grid-template-columns: repeat(auto-fill, minmax(150px, 1fr)); gap: 10px; margin: 0; } ._metricCell_1unhn_793 { padding: 10px 12px; border: 1px solid #e5e7eb; border-radius: 12px; } ._metricCell_1unhn_793 dt { font-size: 12px; font-weight: 500; color: #64748b; } ._metricCell_1unhn_793 dd { margin: 2px 0 0; font-size: 16px; font-weight: 700; color: #0f172a; } ._brokenList_1unhn_829 { margin: 0; padding: 0; list-style: none; font-size: 13px; color: #334155; overflow-wrap: anywhere; } ._brokenList_1unhn_829 li { padding: 4px 0; } ._trend_1unhn_855 { width: 100%; max-width: 420px; height: 64px; } ._empty_1unhn_867 { padding: 28px 12px; text-align: center; border: 1px dashed #cbd5e1; border-radius: 12px; } ._empty_1unhn_867 p { margin: 0 0 4px; } /* ---------- footer ---------- */ ._footer_1unhn_891 { display: flex; justify-content: flex-end; gap: 10px; padding: 12px 20px; border-top: 1px solid #e5e7eb; } ._btnPrimary_1unhn_907, ._btnSecondary_1unhn_909 { display: inline-flex; align-items: center; gap: 6px; padding: 8px 16px; border-radius: 10px; font-size: 14px; font-weight: 600; cursor: pointer; } ._btnPrimary_1unhn_907 { border: 1px solid #2563eb; background: #2563eb; color: #fff; } ._btnPrimary_1unhn_907:disabled { opacity: 0.6; cursor: not-allowed; } ._btnSecondary_1unhn_909 { border: 1px solid #cbd5e1; background: #fff; color: #334155; } ._spin_1unhn_961 { animation: _spin_1unhn_961 0.9s linear infinite; } @keyframes _spin_1unhn_961 { to { transform: rotate(360deg); } } @media (prefers-reduced-motion: reduce) { ._spin_1unhn_961 { animation: none; } } @media (max-width: 640px) { ._scoreRow_1unhn_361 { grid-template-columns: 1fr; } } /* ===================================================== DetailedComparison.module.css Layout uses the Bootstrap grid (row / col-*); this file handles the look and the responsive details. ===================================================== */ ._page_1lbs2_13 { --dc-text: #0f172a; --dc-text-2: #334155; --dc-muted: #64748b; --dc-border: #e5e7eb; --dc-blue: #2563eb; --dc-blue-dark: #1d4ed8; --dc-green: #16a34a; --dc-radius: 14px; display: grid; gap: 16px; color: var(--dc-text); font-size: 13px; } ._page_1lbs2_13 * { box-sizing: border-box; } /* ---------- Panels ---------- */ ._panel_1lbs2_57 { min-width: 0; padding: 18px; border: 1px solid var(--dc-border); border-radius: var(--dc-radius); background: #fff; box-shadow: 0 1px 2px rgba(15, 23, 42, 0.04); } ._mainPanel_1lbs2_75 { display: grid; gap: 16px; } ._panelHead_1lbs2_85 { display: flex; flex-wrap: wrap; align-items: flex-start; justify-content: space-between; gap: 12px; } ._panelHeadText_1lbs2_101 { min-width: 0; flex: 1 1 280px; } ._title_1lbs2_111 { margin: 0; font-size: 20px; font-weight: 700; line-height: 1.3; } ._subtitle_1lbs2_125 { margin: 4px 0 0; color: var(--dc-muted); font-size: 13px; } ._headActions_1lbs2_137 { display: flex; flex-wrap: wrap; gap: 10px; } ._btnOutline_1lbs2_149, ._btnPrimary_1lbs2_151 { display: inline-flex; align-items: center; justify-content: center; gap: 8px; height: 40px; padding: 0 16px; border-radius: 8px; font-size: 13px; font-weight: 600; white-space: nowrap; cursor: pointer; transition: background 0.15s ease, border-color 0.15s ease; } ._btnOutline_1lbs2_149 { border: 1px solid var(--dc-border); background: #fff; color: var(--dc-text-2); } ._btnOutline_1lbs2_149:hover { background: #f8fafc; } ._btnPrimary_1lbs2_151 { border: 0; background: var(--dc-blue); color: #fff; } ._btnPrimary_1lbs2_151:hover:not(:disabled) { background: var(--dc-blue-dark); } ._btnPrimary_1lbs2_151:disabled { opacity: 0.75; cursor: not-allowed; } ._btnOutline_1lbs2_149:focus-visible, ._btnPrimary_1lbs2_151:focus-visible, ._recommendBtn_1lbs2_239:focus-visible { outline: 2px solid var(--dc-blue); outline-offset: 2px; } ._spin_1lbs2_249 { animation: _dc-spin_1lbs2_1 0.9s linear infinite; } @keyframes _dc-spin_1lbs2_1 { to { transform: rotate(360deg); } } @media (prefers-reduced-motion: reduce) { ._spin_1lbs2_249 { animation: none; } } /* ---------- Stat cards ---------- */ ._statCard_1lbs2_285 { display: flex; align-items: flex-start; gap: 14px; height: 100%; padding: 16px; border: 1px solid transparent; border-radius: 12px; } ._tone_blue_1lbs2_305 { --tone-bg: #eff4ff; --tone-border: #dbe6ff; --tone-icon-bg: #dbeafe; --tone-icon: #2563eb; } ._tone_green_1lbs2_317 { --tone-bg: #effbf3; --tone-border: #d3f2de; --tone-icon-bg: #d1fae5; --tone-icon: #16a34a; } ._tone_purple_1lbs2_329 { --tone-bg: #f5f1ff; --tone-border: #e5dcff; --tone-icon-bg: #ede9fe; --tone-icon: #7c3aed; } ._tone_orange_1lbs2_341 { --tone-bg: #fff6ec; --tone-border: #ffe5c7; --tone-icon-bg: #ffedd5; --tone-icon: #ea580c; } ._statCard_1lbs2_285 { background: var(--tone-bg); border-color: var(--tone-border); } ._statIcon_1lbs2_365 { display: inline-grid; place-items: center; flex: none; width: 44px; height: 44px; border-radius: 12px; background: var(--tone-icon-bg); color: var(--tone-icon); font-size: 22px; } ._statBody_1lbs2_389 { min-width: 0; } ._statLabel_1lbs2_397 { margin: 0; color: var(--dc-muted); font-size: 13px; } ._statValue_1lbs2_409 { margin: 2px 0; font-size: 26px; font-weight: 700; line-height: 1.2; } ._statValueBig_1lbs2_423 { font-size: 20px; overflow-wrap: anywhere; } ._statFoot_1lbs2_433 { margin: 0; color: var(--dc-muted); font-size: 12.5px; } ._foot_up_1lbs2_445 { color: var(--dc-green); } ._foot_link_1lbs2_453 { color: #7c3aed; } /* ---------- Table card ---------- */ ._tableCard_1lbs2_465 { min-width: 0; border: 1px solid var(--dc-border); border-radius: 12px; overflow: hidden; } ._cardTitle_1lbs2_479 { margin: 0; font-size: 15px; font-weight: 700; } ._tableCard_1lbs2_465 > ._cardTitle_1lbs2_479 { padding: 14px 16px; } ._tableScroll_1lbs2_499 { border-top: 1px solid var(--dc-border); } ._table_1lbs2_465 { min-width: 820px; margin: 0; font-size: 13px; --bs-table-bg: transparent; } ._table_1lbs2_465 th, ._table_1lbs2_465 td { padding: 10px 14px; border-color: var(--dc-border); vertical-align: middle; } ._metricHead_1lbs2_535, ._siteHead_1lbs2_537 { background: #f8fafc !important; font-weight: 600; } ._metricHead_1lbs2_535 { width: 220px; color: var(--dc-text); } ._siteCell_1lbs2_557 { display: flex; align-items: center; gap: 10px; } ._avatar_1lbs2_569 { display: inline-grid; place-items: center; flex: none; width: 30px; height: 30px; border-radius: 50%; font-size: 13px; font-weight: 700; } ._siteText_1lbs2_591 { display: grid; min-width: 0; } ._siteNameRow_1lbs2_601 { display: flex; flex-wrap: wrap; align-items: center; gap: 6px; } ._siteName_1lbs2_601 { font-size: 12.5px; font-weight: 700; white-space: nowrap; } ._roleBadge_1lbs2_627 { padding: 1px 8px; border-radius: 6px; font-size: 10.5px; font-weight: 600; line-height: 1.5; } ._rolePrimary_1lbs2_643 { background: var(--dc-blue); color: #fff; } ._roleComp_1lbs2_653 { background: #e0ecff; color: var(--dc-blue); } ._siteUrl_1lbs2_663 { color: var(--dc-muted); font-size: 11.5px; font-weight: 400; white-space: nowrap; } /* first column stays visible while scrolling sideways on small screens */ ._stickyCol_1lbs2_679 { position: sticky; left: 0; z-index: 1; } ._metricCell_1lbs2_691 { background: #fff; font-weight: 500; } ._metricInner_1lbs2_701 { display: inline-flex; align-items: center; gap: 12px; white-space: nowrap; } ._metricInner_1lbs2_701 svg { flex: none; font-size: 16px; } ._valueCell_1lbs2_725 { text-align: center; font-variant-numeric: tabular-nums; } ._cellBest_1lbs2_735 { background: #dcf5e4 !important; color: #15803d; font-weight: 700; } ._cellWorst_1lbs2_747 { background: #fde2e2 !important; color: #dc2626; font-weight: 600; } /* ---------- Card header (charts / insights) ---------- */ ._cardHead_1lbs2_763 { display: flex; align-items: center; justify-content: space-between; gap: 10px; margin-bottom: 14px; } ._select_1lbs2_779 { width: auto; max-width: 55%; font-size: 12.5px; } /* ---------- Line chart ---------- */ ._chartSvg_1lbs2_795 { display: block; width: 100%; height: auto; } ._gridLine_1lbs2_807 { stroke: #e5e7eb; stroke-width: 1; } ._axisText_1lbs2_817 { fill: #64748b; font-size: 11px; } ._legend_1lbs2_827 { display: flex; flex-wrap: wrap; gap: 6px 16px; margin: 12px 0 0; padding: 0; list-style: none; color: var(--dc-text-2); font-size: 12px; } ._legend_1lbs2_827 li { display: inline-flex; align-items: center; gap: 6px; } ._legendDot_1lbs2_861 { width: 9px; height: 9px; border-radius: 50%; } /* ---------- Bar chart ---------- */ ._barsWrap_1lbs2_877 { display: flex; gap: 8px; height: 280px; } ._barsAxis_1lbs2_889 { display: flex; flex-direction: column; justify-content: space-between; /* leaves room for the x labels under the bars */ padding-bottom: 46px; color: var(--dc-muted); font-size: 11px; text-align: right; } ._barsArea_1lbs2_911 { position: relative; flex: 1; min-width: 0; } ._barsGrid_1lbs2_923 { position: absolute; inset: 0 0 46px 0; display: flex; flex-direction: column; justify-content: space-between; } ._barsGrid_1lbs2_923 span { display: block; border-top: 1px solid #e5e7eb; } ._barsRow_1lbs2_949 { position: relative; display: flex; align-items: stretch; justify-content: space-around; gap: 8px; height: 100%; } ._barCol_1lbs2_967 { display: flex; flex: 1 1 0; flex-direction: column; align-items: center; min-width: 0; max-width: 90px; } ._barValue_1lbs2_985 { margin-bottom: 4px; font-size: 12.5px; font-weight: 600; } ._barTrack_1lbs2_997 { display: flex; align-items: flex-end; justify-content: center; flex: 1; width: 100%; } ._bar_1lbs2_877 { width: 62%; min-width: 28px; border-radius: 6px 6px 0 0; transition: height 0.4s ease; } ._barLabel_1lbs2_1027 { height: 46px; padding-top: 8px; color: var(--dc-text-2); font-size: 11.5px; line-height: 1.25; text-align: center; overflow-wrap: anywhere; } /* ---------- Insights ---------- */ ._aiBadge_1lbs2_1051 { display: inline-flex; align-items: center; gap: 4px; padding: 3px 10px; border-radius: 6px; background: #ede9fe; color: #6d28d9; font-size: 11.5px; font-weight: 600; white-space: nowrap; } ._insightPanel_1lbs2_1077 { display: flex; flex-direction: column; } ._insightList_1lbs2_1087 { display: grid; gap: 14px; margin: 0 0 16px; padding: 0; list-style: none; } ._insightItem_1lbs2_1103 { display: flex; align-items: flex-start; gap: 12px; } ._insightItem_1lbs2_1103 p { margin: 0; color: var(--dc-text-2); font-size: 13px; line-height: 1.45; } ._insightIcon_1lbs2_1129 { display: inline-grid; place-items: center; flex: none; width: 32px; height: 32px; border-radius: 8px; background: var(--tone-icon-bg); color: var(--tone-icon); font-size: 16px; } ._recommendBtn_1lbs2_239 { display: flex; align-items: center; justify-content: space-between; gap: 8px; width: 100%; margin-top: auto; padding: 10px 14px; border: 1px solid var(--dc-border); border-radius: 8px; background: #fff; color: var(--dc-text); font-size: 13px; font-weight: 600; text-align: left; cursor: pointer; } ._recommendBtn_1lbs2_239:hover { background: #f8fafc; } /* ---------- Responsive ---------- */ @media (max-width: 991.98px) { ._barsWrap_1lbs2_877 { height: 260px; } } @media (max-width: 767.98px) { ._panel_1lbs2_57 { padding: 14px; } ._title_1lbs2_111 { font-size: 18px; } /* buttons share the row, then stack on very small screens */ ._headActions_1lbs2_137 { width: 100%; } ._headActions_1lbs2_137 > button { flex: 1 1 160px; } ._statValue_1lbs2_409 { font-size: 24px; } ._metricHead_1lbs2_535 { width: 180px; } } @media (max-width: 575.98px) { ._page_1lbs2_13 { gap: 12px; } ._statCard_1lbs2_285 { padding: 14px; } ._cardHead_1lbs2_763 { flex-wrap: wrap; } ._select_1lbs2_779 { max-width: 100%; } ._barsWrap_1lbs2_877 { height: 240px; } ._bar_1lbs2_877 { min-width: 22px; } ._barLabel_1lbs2_1027 { font-size: 10.5px; } } /* ═══════════════════════════════════════════════════════════════════ SUPER ADMIN DASHBOARD GLOBAL THEME VARIABLES USED ═══════════════════════════════════════════════════════════════════ */ ._dashboard_19861_11 { width: 100%; min-width: 0; display: flex; flex-direction: column; gap: var(--space-4); padding: var(--space-4) var(--space-5) var(--space-5); background: var(--color-bg-light); color: var(--text-primary-dark); font-family: var(--font-family-base); font-size: var(--font-size-base); } /* ================================================================ HEADER ================================================================ */ ._pageHeader_19861_57 { display: flex; align-items: center; justify-content: space-between; gap: var(--space-4); } ._pageHeader_19861_57 h1 { margin: 0 0 var(--space-1); color: var(--text-primary-dark); font-size: var(--font-size-2xl); font-weight: var(--font-weight-bold); line-height: 1.25; } ._pageHeader_19861_57 p { margin: 0; color: var(--text-secondary); font-size: var(--font-size-base); line-height: 1.5; } ._headerActions_19861_111 { display: flex; align-items: center; gap: var(--space-2); } ._dateButton_19861_125 { min-width: 220px; } ._periodButton_19861_133 { min-width: 145px; } /* ================================================================ COMMON CARD ================================================================ */ ._card_19861_149 { min-width: 0; background: var(--color-white); border: 1px solid var(--border-light); border-radius: var(--radius-lg); box-shadow: var(--shadow-sm); } ._cardHeader_19861_171 { min-height: 50px; display: flex; align-items: center; justify-content: space-between; gap: var(--space-3); padding: var(--space-3) var(--space-4); border-bottom: 1px solid var(--border-light); } ._cardHeader_19861_171 h2 { margin: 0; color: var(--text-primary-dark); font-size: var(--font-size-lg); font-weight: var(--font-weight-bold); } /* ================================================================ SUMMARY CARDS ================================================================ */ ._summaryGrid_19861_225 { display: grid; grid-template-columns: repeat(6, minmax(0, 1fr)); gap: var(--space-3); } ._summaryCard_19861_241 { min-width: 0; min-height: 112px; display: flex; align-items: center; gap: var(--space-3); padding: var(--space-4); background: var(--color-white); border: 1px solid var(--border-light); border-radius: var(--radius-lg); box-shadow: var(--shadow-sm); } ._summaryIcon_19861_279 { width: 54px; height: 54px; flex: 0 0 54px; display: flex; align-items: center; justify-content: center; border-radius: var(--radius-full); font-size: 25px; } ._summaryIconPrimary_19861_309 { color: var(--color-primary); background: var(--brand-soft); } ._summaryIconSuccess_19861_321 { color: var(--color-success); background: color-mix(in srgb, var(--color-success) 12%, var(--color-white)); } ._summaryIconWarning_19861_333 { color: var(--color-warning); background: color-mix(in srgb, var(--color-warning) 14%, var(--color-white)); } ._summaryIconDanger_19861_345 { color: var(--color-danger); background: color-mix(in srgb, var(--color-danger) 12%, var(--color-white)); } ._summaryIconPurple_19861_357 { color: #7c3aed; background: #f1eafe; } ._summaryContent_19861_369 { min-width: 0; display: flex; flex-direction: column; gap: var(--space-1); } ._summaryContent_19861_369 > span { color: var(--text-primary-dark); font-size: var(--font-size-sm); font-weight: var(--font-weight-semibold); } ._summaryContent_19861_369 > strong { color: var(--text-primary-dark); font-size: var(--font-size-2xl); font-weight: var(--font-weight-bold); line-height: 1.2; white-space: nowrap; } ._summaryContent_19861_369 small { display: inline-flex; align-items: center; gap: var(--space-1); font-size: var(--font-size-xs); font-weight: var(--font-weight-semibold); white-space: nowrap; } ._successText_19861_447 { color: var(--color-success); } ._warningText_19861_455 { color: var(--color-warning); } ._dangerText_19861_463 { color: var(--color-danger); } /* ================================================================ ANALYTICS ================================================================ */ ._analyticsGrid_19861_479 { width: 100%; min-width: 0; display: grid; grid-template-columns: minmax(0, 1.4fr) minmax(0, 1fr); gap: var(--space-3); } ._analyticsGrid_19861_479 > ._card_19861_149 { min-width: 0; overflow: hidden; } ._chartHeaderRight_19861_515 { display: flex; align-items: center; gap: var(--space-3); } /* ================================================================ LEGEND ================================================================ */ ._legend_19861_537 { display: flex; align-items: center; gap: var(--space-4); padding: var(--space-2) var(--space-3); border: 1px solid var(--border-light); border-radius: var(--radius-md); color: var(--text-primary-dark); font-size: var(--font-size-sm); } ._legend_19861_537 > span { display: inline-flex; align-items: center; gap: var(--space-2); white-space: nowrap; } ._legendLine_19861_587 { position: relative; width: 22px; height: 2px; display: block; background: var(--color-primary); } ._legendLine_19861_587::after { content: ""; position: absolute; left: 8px; top: 50%; width: 7px; height: 7px; transform: translateY(-50%); border-radius: var(--radius-full); background: var(--color-primary); } ._legendBox_19861_645 { width: 20px; height: 16px; display: block; background: color-mix(in srgb, var(--color-primary) 20%, var(--color-white)); } /* ================================================================ REVENUE CHART ================================================================ */ ._revenueChart_19861_671 { height: 230px; display: grid; grid-template-columns: 80px minmax(0, 1fr) 45px; padding: var(--space-3) var(--space-4) var(--space-3); } ._chartYAxis_19861_697, ._chartRightAxis_19861_699 { display: flex; flex-direction: column; justify-content: space-between; padding: var(--space-2) 0 30px; color: var(--text-secondary); font-size: var(--font-size-xs); font-weight: var(--font-weight-medium); } ._chartBody_19861_725 { position: relative; min-width: 0; } ._chartLines_19861_737 { position: absolute; inset: var(--space-2) 0 30px; display: flex; flex-direction: column; justify-content: space-between; } ._chartLines_19861_737 i { width: 100%; height: 1px; display: block; background: var(--border-light); } ._revenueLine_19861_775 { position: absolute; left: 0; top: var(--space-1); z-index: 2; width: 100%; height: calc(100% - 35px); overflow: visible; color: var(--color-primary); pointer-events: none; } ._revenueLine_19861_775 circle { fill: var(--color-primary); } ._chartColumns_19861_819 { position: absolute; inset: 0; z-index: 1; display: grid; grid-template-columns: repeat(7, minmax(0, 1fr)); gap: var(--space-2); } ._chartColumn_19861_819 { min-width: 0; display: flex; flex-direction: column; justify-content: flex-end; text-align: center; } ._chartPlot_19861_865 { position: relative; height: 175px; display: flex; align-items: flex-end; justify-content: center; } ._subscriptionBar_19861_885 { width: 42px; max-height: 115px; border-radius: var(--radius-sm) var(--radius-sm) 0 0; background: color-mix(in srgb, var(--color-primary) 20%, var(--color-white)); } ._subscriptionValue_19861_905 { position: absolute; top: var(--space-3); color: var(--text-primary-dark); font-size: var(--font-size-xs); font-weight: var(--font-weight-bold); } ._revenueValue_19861_927 { position: absolute; bottom: var(--space-2); color: var(--text-secondary); font-size: var(--font-size-xs); font-weight: var(--font-weight-medium); white-space: nowrap; } ._chartColumn_19861_819 > strong { min-height: 30px; display: flex; align-items: flex-end; justify-content: center; color: var(--text-primary-dark); font-size: var(--font-size-xs); font-weight: var(--font-weight-semibold); white-space: nowrap; } /* ================================================================ SUBSCRIPTION OVERVIEW ================================================================ */ ._subscriptionOverview_19861_991 { width: 100%; min-width: 0; min-height: 230px; display: grid; grid-template-columns: 135px minmax(150px, 1fr) minmax(160px, 190px); align-items: center; gap: var(--space-3); padding: var(--space-4); box-sizing: border-box; } ._subscriptionOverview_19861_991 > * { min-width: 0; } ._donutSection_19861_1041 { min-width: 0; display: flex; align-items: center; justify-content: center; } ._donut_19861_1041 { width: 125px; height: 125px; flex: 0 0 125px; display: flex; align-items: center; justify-content: center; border-radius: var(--radius-full); background: conic-gradient( var(--color-primary) 0 23%, var(--color-success) 23% 69%, var(--color-warning) 69% 88%, #7c3aed 88% 100% ); } ._donutCenter_19861_1097 { width: 86px; height: 86px; display: flex; flex-direction: column; align-items: center; justify-content: center; border-radius: var(--radius-full); background: var(--color-white); } ._donutCenter_19861_1097 strong { color: var(--text-primary-dark); font-size: var(--font-size-2xl); font-weight: var(--font-weight-bold); } ._donutCenter_19861_1097 span { color: var(--text-primary-dark); font-size: var(--font-size-sm); font-weight: var(--font-weight-semibold); } ._planLegend_19861_1153 { width: 100%; min-width: 0; display: flex; flex-direction: column; gap: var(--space-3); } ._planLegend_19861_1153 > div { width: 100%; min-width: 0; display: grid; grid-template-columns: 10px minmax(60px, 1fr) auto; align-items: center; gap: var(--space-2); color: var(--text-primary-dark); font-size: var(--font-size-sm); } ._planLegend_19861_1153 strong { font-size: var(--font-size-sm); text-align: right; white-space: nowrap; } ._dotPrimary_19861_1229, ._dotSuccess_19861_1231, ._dotWarning_19861_1233, ._dotPurple_19861_1235 { width: 10px; height: 10px; display: block; border-radius: var(--radius-full); } ._dotPrimary_19861_1229 { background: var(--color-primary); } ._dotSuccess_19861_1231 { background: var(--color-success); } ._dotWarning_19861_1233 { background: var(--color-warning); } ._dotPurple_19861_1235 { background: #7c3aed; } /* ================================================================ SUBSCRIPTION STATUS ================================================================ */ ._subscriptionStatus_19861_1293 { width: 100%; min-width: 0; max-width: 190px; justify-self: end; padding-left: var(--space-3); border-left: 1px solid var(--border-light); box-sizing: border-box; } ._subscriptionStatus_19861_1293 > div { width: 100%; min-width: 0; min-height: 38px; display: grid; grid-template-columns: 20px minmax(0, 1fr) auto; align-items: center; gap: var(--space-2); padding: var(--space-2) 10px; border: 1px solid var(--border-light); color: var(--text-primary-dark); font-size: var(--font-size-sm); box-sizing: border-box; } ._subscriptionStatus_19861_1293 > div + div { border-top: 0; } ._subscriptionStatus_19861_1293 > div:first-child { border-radius: var(--radius-md) var(--radius-md) 0 0; } ._subscriptionStatus_19861_1293 > div:last-child { border-radius: 0 0 var(--radius-md) var(--radius-md); } ._subscriptionStatus_19861_1293 svg { flex-shrink: 0; font-size: var(--font-size-lg); } ._subscriptionStatus_19861_1293 span { min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; } ._subscriptionStatus_19861_1293 strong { min-width: 18px; text-align: right; white-space: nowrap; } ._statusSuccess_19861_1447 { color: var(--color-success); } ._statusPrimary_19861_1455 { color: var(--color-primary); } ._statusWarning_19861_1463 { color: var(--color-warning); } ._statusMuted_19861_1471 { color: var(--text-muted); } /* ================================================================ CLIENT TABLE ================================================================ */ ._clientCard_19861_1487 { overflow: hidden; } ._clientHeader_19861_1495 { min-height: 56px; display: flex; align-items: center; justify-content: space-between; gap: var(--space-3); padding: var(--space-2) var(--space-4); border-bottom: 1px solid var(--border-light); } ._clientHeader_19861_1495 h2 { margin: 0; color: var(--text-primary-dark); font-size: var(--font-size-lg); } ._clientFilters_19861_1539 { display: flex; align-items: center; gap: var(--space-2); } /* ================================================================ SEARCH ================================================================ */ ._searchBox_19861_1561 { position: relative; width: 285px; height: 38px; display: flex; align-items: center; } ._searchBox_19861_1561 > svg { position: absolute; left: var(--space-3); color: var(--text-muted); font-size: var(--font-size-base); } ._searchBox_19861_1561 input { width: 100%; height: 100%; padding: 0 var(--space-3) 0 36px; border: 1px solid var(--border-default); border-radius: var(--radius-md); outline: none; background: var(--color-white); color: var(--text-primary-dark); font-family: var(--font-family-base); font-size: var(--font-size-sm); transition: var(--transition-fast); } ._searchBox_19861_1561 input::placeholder { color: var(--text-muted); } ._searchBox_19861_1561 input:focus { border-color: var(--color-primary); box-shadow: 0 0 0 3px color-mix(in srgb, var(--color-primary) 10%, transparent); } /* ================================================================ FILTER ================================================================ */ ._filterSelect_19861_1673 { position: relative; width: 200px; height: 38px; } ._filterSelect_19861_1673 select { width: 100%; height: 100%; padding: 0 34px 0 var(--space-3); appearance: none; border: 1px solid var(--border-default); border-radius: var(--radius-md); outline: none; background: var(--color-white); color: var(--text-primary-dark); font-family: var(--font-family-base); font-size: var(--font-size-sm); } ._filterSelect_19861_1673 svg { position: absolute; right: var(--space-3); top: 50%; transform: translateY(-50%); color: var(--text-secondary); pointer-events: none; } ._textButton_19861_1755 { padding: var(--space-1); border: 0; background: transparent; color: var(--color-primary); font-family: var(--font-family-base); font-size: var(--font-size-sm); font-weight: var(--font-weight-medium); cursor: pointer; white-space: nowrap; } ._textButton_19861_1755:hover { color: var(--color-primary-dark); } /* ================================================================ TABLE ================================================================ */ ._tableWrapper_19861_1807 { width: 100%; overflow-x: auto; } ._clientTable_19861_1819 { width: 100%; border-collapse: collapse; table-layout: fixed; } ._clientTable_19861_1819 th { min-height: 40px; padding: var(--space-2) var(--space-3); background: var(--color-gray-light); border-bottom: 1px solid var(--border-light); color: var(--text-secondary); font-size: var(--font-size-sm); font-weight: var(--font-weight-semibold); text-align: left; } ._clientTable_19861_1819 td { height: 42px; padding: var(--space-2) var(--space-3); border-bottom: 1px solid var(--border-light); color: var(--text-primary-dark); font-size: var(--font-size-sm); vertical-align: middle; } ._clientTable_19861_1819 th:nth-child(1) { width: 16%; } ._clientTable_19861_1819 th:nth-child(2) { width: 9%; } ._clientTable_19861_1819 th:nth-child(3) { width: 31%; } ._clientTable_19861_1819 th:nth-child(4) { width: 10%; } ._clientTable_19861_1819 th:nth-child(5) { width: 15%; } ._clientTable_19861_1819 th:nth-child(6) { width: 10%; } ._clientTable_19861_1819 th:nth-child(7) { width: 9%; } /* ================================================================ ORGANIZATION ================================================================ */ ._organization_19861_1961 { min-width: 0; display: flex; align-items: center; gap: var(--space-2); overflow: hidden; } ._organization_19861_1961 > span, ._paymentOrganization_19861_1985 > span { display: flex; align-items: center; color: var(--text-secondary); font-size: var(--font-size-base); } ._organization_19861_1961 strong { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; font-size: var(--font-size-sm); } /* ================================================================ BADGES ================================================================ */ ._badge_19861_2031 { display: inline-flex; align-items: center; justify-content: center; width: fit-content; min-width: 0; padding: 6px 11px; border-radius: 7px; font-size: 12px; font-weight: 500; line-height: 1; white-space: nowrap; } /* ACTIVE / PAID / GROWTH */ ._badgeSuccess_19861_2073 { background: #dff7ed; color: #00a86b; } /* STARTER / ALL CAMPAIGNS */ ._badgePrimary_19861_2087 { background: #edf4ff; color: #0866ff; } /* BUSINESS / TRIAL / DUE / EXPIRING */ ._badgeWarning_19861_2101 { background: #fff0da; color: #f59e0b; } /* CUSTOM */ ._badgePurple_19861_2115 { background: #f0e8ff; color: #7c3aed; } /* SUSPENDED / PAST DUE / OVERDUE / FAILED */ ._badgeDanger_19861_2129 { background: #ffe5e5; color: #ff2d2d; } /* DEFAULT */ ._badgeNeutral_19861_2143 { background: #f1f5f9; color: #64748b; } /* ================================================================ USAGE CELL ================================================================ */ ._usageCell_19861_2161 { display: flex; align-items: center; gap: var(--space-4); } ._usageTop_19861_2175 { min-width: 185px; display: flex; align-items: center; gap: var(--space-2); } ._progress_19861_2193 { width: 145px; height: 6px; overflow: hidden; border-radius: var(--radius-full); background: var(--color-gray-light); } ._progress_19861_2193 > span { height: 100%; display: block; border-radius: inherit; } ._progressPrimary_19861_2231 { background: var(--color-primary); } ._progressDanger_19861_2239 { background: var(--color-danger); } ._usageTop_19861_2175 strong { font-size: var(--font-size-sm); } ._usageCell_19861_2161 small { color: var(--text-primary-dark); font-size: var(--font-size-xs); white-space: nowrap; } ._renewalWarning_19861_2271 { color: var(--color-warning) !important; font-weight: var(--font-weight-semibold); } ._renewalDanger_19861_2283 { color: var(--color-danger) !important; font-weight: var(--font-weight-semibold); } /* ================================================================ TABLE ACTION ================================================================ */ ._tableActions_19861_2303 { display: flex; align-items: center; gap: var(--space-2); } ._viewButton_19861_2317 { min-height: 30px; display: inline-flex; align-items: center; justify-content: center; gap: var(--space-1); padding: var(--space-1) var(--space-2); border: 1px solid color-mix(in srgb, var(--color-primary) 35%, var(--border-light)); border-radius: var(--radius-md); background: var(--color-white); color: var(--color-primary); font-family: inherit; font-size: var(--font-size-xs); font-weight: var(--font-weight-medium); cursor: pointer; } ._viewButton_19861_2317:hover { background: var(--brand-soft); } ._moreButton_19861_2379 { display: flex; align-items: center; justify-content: center; padding: var(--space-1); border: 0; background: transparent; color: var(--text-primary-dark); font-size: var(--font-size-base); cursor: pointer; } /* ================================================================ BOTTOM GRID ================================================================ */ ._bottomGrid_19861_2423 { display: grid; grid-template-columns: 1fr 1fr 1.1fr; gap: var(--space-3); } ._smallCard_19861_2445 { min-height: 170px; overflow: hidden; } /* ================================================================ CHANNEL ================================================================ */ ._channelList_19861_2465 { display: flex; flex-direction: column; gap: var(--space-2); padding: var(--space-3) var(--space-4); } ._channelRow_19861_2483 { display: grid; grid-template-columns: 105px 1fr 45px; align-items: center; gap: var(--space-3); color: var(--text-primary-dark); font-size: var(--font-size-sm); } ._channelProgress_19861_2517 { height: 6px; overflow: hidden; border-radius: var(--radius-full); background: var(--color-gray-light); } ._channelProgress_19861_2517 i { height: 100%; display: block; border-radius: inherit; background: var(--color-primary); } ._channelRow_19861_2483 strong { font-size: var(--font-size-sm); } /* ================================================================ ALERTS ================================================================ */ ._alertList_19861_2573, ._paymentList_19861_2575 { display: flex; flex-direction: column; } ._alertRow_19861_2585 { min-height: 34px; display: grid; grid-template-columns: 22px minmax(0, 1fr) auto; align-items: center; gap: var(--space-2); padding: var(--space-2) var(--space-4); border-bottom: 1px solid var(--border-light); color: var(--text-primary-dark); font-size: var(--font-size-sm); } ._alertRow_19861_2585:last-child { border-bottom: 0; } ._alertRow_19861_2585 > span:last-child { color: var(--text-muted); font-size: var(--font-size-xs); } ._alertWarning_19861_2651 { color: var(--color-warning); font-size: var(--font-size-lg); } ._alertDanger_19861_2663 { color: var(--color-danger); font-size: var(--font-size-lg); } ._alertInfo_19861_2675 { color: var(--color-primary); font-size: var(--font-size-lg); } /* ================================================================ PAYMENTS ================================================================ */ ._paymentRow_19861_2695 { min-height: 36px; display: grid; grid-template-columns: minmax(0, 1fr) 110px 65px; align-items: center; gap: var(--space-3); padding: var(--space-2) var(--space-4); border-bottom: 1px solid var(--border-light); color: var(--text-primary-dark); font-size: var(--font-size-sm); } ._paymentRow_19861_2695:last-child { border-bottom: 0; } ._paymentOrganization_19861_1985 { min-width: 0; display: flex; align-items: center; gap: var(--space-2); } ._paymentOrganization_19861_1985 strong { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; } /* ================================================================ PLATFORM HEALTH ================================================================ */ ._platformHealth_19861_2791 { min-height: 64px; display: grid; grid-template-columns: repeat(4, 1fr); align-items: center; padding: var(--space-2) var(--space-5); } ._platformHealthItem_19861_2815 { min-width: 0; display: flex; align-items: center; justify-content: center; gap: var(--space-3); padding: var(--space-1) var(--space-4); border-right: 1px solid var(--border-light); } ._platformHealthItem_19861_2815:last-child { border-right: 0; } ._platformHealthIcon_19861_2851 { width: 34px; height: 34px; flex: 0 0 34px; display: flex; align-items: center; justify-content: center; border-radius: var(--radius-full); font-size: var(--font-size-lg); } ._platformHealthSuccess_19861_2881 { color: var(--color-success); background: color-mix(in srgb, var(--color-success) 12%, var(--color-white)); } ._platformHealthWarning_19861_2893 { color: var(--color-warning); background: color-mix(in srgb, var(--color-warning) 14%, var(--color-white)); } ._platformHealthItem_19861_2815 p { display: flex; flex-direction: column; gap: 2px; margin: 0; } ._platformHealthItem_19861_2815 strong { color: var(--text-primary-dark); font-size: var(--font-size-sm); font-weight: var(--font-weight-semibold); } ._platformHealthItem_19861_2815 small { color: var(--text-secondary); font-size: var(--font-size-xs); } /* ================================================================ RESPONSIVE - LARGE ================================================================ */ @media (max-width: 1500px) { ._summaryGrid_19861_225 { grid-template-columns: repeat(3, minmax(0, 1fr)); } ._analyticsGrid_19861_479 { grid-template-columns: 1fr; } ._subscriptionOverview_19861_991 { grid-template-columns: 150px minmax(160px, 1fr) minmax(170px, 200px); } } /* ================================================================ RESPONSIVE - TABLET ================================================================ */ @media (max-width: 1100px) { ._pageHeader_19861_57 { align-items: flex-start; flex-direction: column; } ._headerActions_19861_111 { width: 100%; flex-wrap: wrap; } ._bottomGrid_19861_2423 { grid-template-columns: 1fr; } ._clientHeader_19861_1495 { align-items: flex-start; flex-direction: column; } ._clientFilters_19861_1539 { width: 100%; flex-wrap: wrap; } ._platformHealth_19861_2791 { grid-template-columns: repeat(2, 1fr); gap: var(--space-2); } ._platformHealthItem_19861_2815 { border-right: 0; } } /* ================================================================ RESPONSIVE - MOBILE ================================================================ */ @media (max-width: 768px) { ._dashboard_19861_11 { padding: var(--space-3); } ._summaryGrid_19861_225 { grid-template-columns: 1fr; } ._headerActions_19861_111 { display: grid; grid-template-columns: 1fr; } ._headerActions_19861_111 .app-btn { width: 100%; } ._dateButton_19861_125 { min-width: 0; } ._analyticsGrid_19861_479 ._cardHeader_19861_171 { align-items: flex-start; flex-direction: column; } ._chartHeaderRight_19861_515 { width: 100%; align-items: flex-start; flex-direction: column; } ._legend_19861_537 { width: 100%; flex-wrap: wrap; } ._periodButton_19861_133 { width: 100%; min-width: 0; } ._subscriptionOverview_19861_991 { grid-template-columns: 1fr; } ._subscriptionStatus_19861_1293 { width: 100%; max-width: none; justify-self: stretch; padding-left: 0; border-left: 0; } ._searchBox_19861_1561, ._filterSelect_19861_1673 { width: 100%; } ._clientFilters_19861_1539 { display: grid; grid-template-columns: 1fr; } ._clientTable_19861_1819 { min-width: 1200px; } ._platformHealth_19861_2791 { grid-template-columns: 1fr 1fr; } } /* ================================================================ RESPONSIVE - SMALL MOBILE ================================================================ */ @media (max-width: 480px) { ._pageHeader_19861_57 h1 { font-size: var(--font-size-xl); } ._summaryCard_19861_241 { padding: var(--space-3); } ._revenueChart_19861_671 { min-width: 700px; } ._card_19861_149:has(._revenueChart_19861_671) { overflow-x: auto; } ._platformHealth_19861_2791 { grid-template-columns: repeat(2, minmax(0, 1fr)); padding: var(--space-3); } ._platformHealthItem_19861_2815 { justify-content: flex-start; gap: var(--space-2); padding: var(--space-2); } ._platformHealthIcon_19861_2851 { width: 30px; height: 30px; flex: 0 0 30px; } ._platformHealthItem_19861_2815 strong { font-size: 12px; } ._platformHealthItem_19861_2815 small { font-size: 11px; } } /* ============================================================ PAYMENT PAGE ============================================================ */ ._paymentPage_xlslv_9 { width: 100%; min-height: 100%; padding: 26px 28px 30px; box-sizing: border-box; background: #f8fafc; } /* ============================================================ PAGE HEADER ============================================================ */ ._paymentPageHeader_xlslv_33 { display: flex; align-items: flex-start; justify-content: space-between; margin-bottom: 22px; } ._paymentPageTitle_xlslv_47 { margin: 0; color: #14213d; font-size: 28px; line-height: 1.2; font-weight: 700; letter-spacing: -0.6px; } ._paymentPageSubtitle_xlslv_65 { margin: 7px 0 0; color: #8290a8; font-size: 13px; line-height: 1.5; } /* ============================================================ SUMMARY CARDS ============================================================ */ ._paymentSummaryGrid_xlslv_87 { display: grid; grid-template-columns: repeat(5, minmax(0, 1fr)); gap: 18px; margin-bottom: 26px; } ._paymentSummaryCard_xlslv_101 { position: relative; min-height: 142px; padding: 19px 20px 17px; box-sizing: border-box; background: #ffffff; border: 1px solid #e7ebf2; border-radius: 11px; box-shadow: 0 2px 5px rgba(24, 39, 75, 0.025), 0 8px 20px rgba(24, 39, 75, 0.035); overflow: hidden; } ._paymentSummaryCard_xlslv_101::before { content: ""; position: absolute; top: -1px; left: 0; right: 0; height: 3px; border-radius: 10px 10px 0 0; } /* ============================================================ SUMMARY CARD TOP BORDERS ============================================================ */ ._totalCard_xlslv_157::before { background: #1769ff; } ._paidCard_xlslv_165::before { background: #13b879; } ._pendingCard_xlslv_173::before { background: #f5a000; } ._failedCard_xlslv_181::before { background: #ff3d3d; } ._revenueCard_xlslv_189::before { background: #7d3cff; } /* ============================================================ SUMMARY CARD CONTENT ============================================================ */ ._summaryCardTop_xlslv_205 { display: flex; align-items: center; justify-content: space-between; gap: 10px; } ._summaryCardLabel_xlslv_219 { color: #697791; font-size: 12px; line-height: 1; font-weight: 600; letter-spacing: 0.2px; } ._summaryCardIcon_xlslv_235 { width: 34px; height: 34px; display: flex; align-items: center; justify-content: center; flex-shrink: 0; border-radius: 50%; } ._totalIcon_xlslv_255 { color: #1769ff; background: #eaf2ff; } ._paidIcon_xlslv_265 { color: #10a86f; background: #e4f8ef; } ._pendingIcon_xlslv_275 { color: #e99a00; background: #fff3df; } ._failedIcon_xlslv_285 { color: #f0353a; background: #ffe8e8; } ._revenueIcon_xlslv_295 { color: #6c36e8; background: #f0e9ff; } ._summaryCardValue_xlslv_305 { margin-top: 20px; color: #14213d; font-size: 24px; line-height: 1; font-weight: 700; letter-spacing: -0.5px; } ._revenueValue_xlslv_323 { font-size: 20px; letter-spacing: -0.3px; white-space: nowrap; } ._summaryCardDescription_xlslv_335 { margin-top: 13px; color: #8a96aa; font-size: 11px; line-height: 1.4; } /* ============================================================ TABLE CARD ============================================================ */ ._paymentTableCard_xlslv_357 { width: 100%; background: #ffffff; border: 1px solid #e5eaf1; border-radius: 12px; box-shadow: 0 2px 5px rgba(24, 39, 75, 0.025), 0 8px 22px rgba(24, 39, 75, 0.035); overflow: visible; } /* ============================================================ PAYMENT TOOLBAR ============================================================ */ ._paymentToolbarActions_xlslv_387 { display: flex; align-items: center; gap: 10px; margin-left: 2px; } ._paymentExportBtn_xlslv_401, ._paymentCreateBtn_xlslv_403 { height: 36px; display: inline-flex; align-items: center; justify-content: center; gap: 7px; padding: 0 14px; border-radius: 7px; font-family: inherit; font-size: 12px; font-weight: 600; cursor: pointer; transition: background 0.15s ease, border-color 0.15s ease, box-shadow 0.15s ease, transform 0.15s ease; } /* Export */ ._paymentExportBtn_xlslv_401 { color: #1d2c49; background: #ffffff; border: 1px solid #e0e6ef; } ._paymentExportBtn_xlslv_401:hover { background: #f8fafc; border-color: #cfd7e4; } /* Create */ ._paymentCreateBtn_xlslv_403 { color: #ffffff; background: #1769ff; border: 1px solid #1769ff; padding-left: 15px; padding-right: 16px; box-shadow: 0 3px 8px rgba(23, 105, 255, 0.18); } ._paymentCreateBtn_xlslv_403:hover { background: #0f5ce6; border-color: #0f5ce6; box-shadow: 0 5px 12px rgba(23, 105, 255, 0.22); } ._paymentCreateBtn_xlslv_403:active { transform: translateY(1px); } /* ============================================================ PAYMENT ID ============================================================ */ ._paymentIdCell_xlslv_517 { display: flex; align-items: center; gap: 11px; min-width: 0; } ._paymentAvatar_xlslv_531 { width: 34px; height: 34px; display: inline-flex; align-items: center; justify-content: center; flex-shrink: 0; border-radius: 50%; color: #1670f8; background: #eaf2ff; font-size: 11px; font-weight: 700; } ._paymentIdText_xlslv_559 { color: #1d2d4b; font-size: 12px; font-weight: 600; white-space: nowrap; } /* ============================================================ INVOICE ============================================================ */ ._invoiceLink_xlslv_581 { padding: 0; border: 0; background: transparent; color: #1769ff; font-family: inherit; font-size: 12px; font-weight: 500; cursor: pointer; } ._invoiceLink_xlslv_581:hover { text-decoration: underline; } /* ============================================================ SUBSCRIPTION ============================================================ */ ._subscriptionBadge_xlslv_619 { display: inline-flex; align-items: center; min-height: 24px; padding: 0 9px; border-radius: 6px; font-size: 11px; line-height: 1; font-weight: 600; } ._subscriptionBlue_xlslv_641 { color: #1769ff; background: #edf4ff; } ._subscriptionPurple_xlslv_651 { color: #7040df; background: #f1ebff; } /* ============================================================ AMOUNT ============================================================ */ ._paymentAmount_xlslv_669 { color: #34435e; font-size: 12px; font-weight: 500; white-space: nowrap; } /* ============================================================ PAYMENT METHOD ============================================================ */ ._paymentMethod_xlslv_691 { display: flex; align-items: center; gap: 9px; white-space: nowrap; } ._paymentMethodLogo_xlslv_705 { width: 34px; height: 27px; display: inline-flex; align-items: center; justify-content: center; flex-shrink: 0; border: 1px solid #e1e6ed; border-radius: 5px; background: #ffffff; font-size: 8px; line-height: 1; font-weight: 800; } ._methodVisa_xlslv_735 { color: #1a4fd4; } ._methodMastercard_xlslv_743 { color: #df451e; } ._methodAmex_xlslv_751 { color: #1476bb; } ._methodPaypal_xlslv_759 { color: #1d4d99; font-size: 14px; } ._paymentMethodText_xlslv_769 { color: #46536b; font-size: 12px; font-weight: 500; } /* ============================================================ STATUS ============================================================ */ ._paymentStatus_xlslv_789 { display: inline-flex; align-items: center; justify-content: center; min-width: 54px; height: 25px; padding: 0 9px; box-sizing: border-box; border-radius: 6px; font-size: 10px; line-height: 1; font-weight: 600; } ._isPaid_xlslv_817 { color: #109b67; background: #e2f7ed; } ._isPending_xlslv_827 { color: #d98c00; background: #fff2dc; } ._isFailed_xlslv_837 { color: #e13d43; background: #ffe5e7; } ._isRefunded_xlslv_847 { color: #64748b; background: #edf0f4; } /* ============================================================ RESPONSIVE ============================================================ */ @media (max-width: 1400px) { ._paymentSummaryGrid_xlslv_87 { gap: 13px; } ._paymentSummaryCard_xlslv_101 { padding-left: 16px; padding-right: 16px; } ._summaryCardLabel_xlslv_219 { font-size: 11px; } ._revenueValue_xlslv_323 { font-size: 18px; } } /* ============================================================ TABLET / MEDIUM ============================================================ */ @media (max-width: 1150px) { ._paymentSummaryGrid_xlslv_87 { grid-template-columns: repeat(3, minmax(0, 1fr)); } } /* ============================================================ MOBILE ============================================================ */ @media (max-width: 800px) { ._paymentPage_xlslv_9 { padding: 20px 16px; } ._paymentSummaryGrid_xlslv_87 { grid-template-columns: repeat(2, minmax(0, 1fr)); } ._paymentPageTitle_xlslv_47 { font-size: 24px; } ._paymentToolbarActions_xlslv_387 { gap: 6px; } ._paymentExportBtn_xlslv_401 span, ._paymentCreateBtn_xlslv_403 span { display: none; } ._paymentExportBtn_xlslv_401, ._paymentCreateBtn_xlslv_403 { width: 36px; padding: 0; } } /* ============================================================ SMALL MOBILE ============================================================ */ @media (max-width: 520px) { ._paymentPage_xlslv_9 { padding: 18px 12px 24px; } ._paymentSummaryGrid_xlslv_87 { grid-template-columns: 1fr; } ._paymentPageHeader_xlslv_33 { margin-bottom: 18px; } ._paymentPageSubtitle_xlslv_65 { display: none; } ._paymentPageTitle_xlslv_47 { font-size: 22px; } ._paymentSummaryCard_xlslv_101 { min-height: 135px; } } /* ============================================================ PAYMENT CREATE PAGE ============================================================ */ ._paymentCreatePage_17xog_9 { width: 100%; min-height: 100%; padding: 20px 28px 30px; box-sizing: border-box; background: #f8fafc; color: #17233d; } /* ============================================================ PAGE HEADER ============================================================ */ ._pageHeader_17xog_35 { display: flex; align-items: flex-start; justify-content: space-between; gap: 24px; margin-bottom: 18px; } ._headerLeft_17xog_51 { min-width: 0; } ._breadcrumb_17xog_59 { display: flex; align-items: center; gap: 10px; margin-bottom: 11px; font-size: 12px; line-height: 1; } ._breadcrumbLink_17xog_77 { padding: 0; border: 0; background: transparent; color: #1769ff; font-family: inherit; font-size: 12px; font-weight: 500; cursor: pointer; } ._breadcrumbLink_17xog_77:hover { text-decoration: underline; } ._breadcrumbSeparator_17xog_107 { color: #b1bac9; } ._breadcrumbCurrent_17xog_115 { color: #77849a; font-weight: 500; } ._pageTitle_17xog_125 { margin: 0; color: #14213d; font-size: 27px; line-height: 1.2; font-weight: 700; letter-spacing: -0.6px; } ._pageSubtitle_17xog_143 { margin: 6px 0 0; color: #7c899f; font-size: 12px; line-height: 1.5; } ._headerActions_17xog_157 { display: flex; align-items: center; gap: 12px; padding-top: 19px; flex-shrink: 0; } ._cancelButton_17xog_173, ._saveButton_17xog_175 { height: 37px; display: inline-flex; align-items: center; justify-content: center; gap: 7px; padding: 0 17px; border-radius: 7px; font-family: inherit; font-size: 12px; font-weight: 600; cursor: pointer; transition: background 0.15s ease, border-color 0.15s ease, box-shadow 0.15s ease, transform 0.15s ease; } ._cancelButton_17xog_173 { color: #283751; background: #ffffff; border: 1px solid #dce3ed; } ._cancelButton_17xog_173:hover { background: #f8fafc; border-color: #cbd5e1; } ._saveButton_17xog_175 { color: #ffffff; background: #1769ff; border: 1px solid #1769ff; padding-left: 16px; padding-right: 16px; box-shadow: 0 3px 8px rgba(23, 105, 255, 0.18); } ._saveButton_17xog_175:hover { background: #0f5ce6; border-color: #0f5ce6; box-shadow: 0 5px 12px rgba(23, 105, 255, 0.22); } ._saveButton_17xog_175:active, ._cancelButton_17xog_173:active, ._bottomCreateButton_17xog_269:active { transform: translateY(1px); } /* ============================================================ FORM SECTIONS ============================================================ */ ._formSection_17xog_285 { width: 100%; box-sizing: border-box; padding: 12px 18px 15px; background: #ffffff; border: 1px solid #e4e9f1; border-radius: 10px; box-shadow: 0 2px 5px rgba(24, 39, 75, 0.02), 0 7px 18px rgba(24, 39, 75, 0.025); } ._formSection_17xog_285 + ._formSection_17xog_285 { margin-top: 10px; } /* ============================================================ SECTION HEADER ============================================================ */ ._sectionHeader_17xog_325 { height: 30px; display: flex; align-items: center; gap: 7px; margin-bottom: 8px; } ._sectionIcon_17xog_341 { width: 27px; height: 27px; display: inline-flex; align-items: center; justify-content: center; flex-shrink: 0; border-radius: 7px; color: #1769ff; background: #edf4ff; } ._sectionNumber_17xog_365 { color: #1b2a47; font-size: 14px; line-height: 1; font-weight: 700; } ._sectionTitle_17xog_379 { color: #1b2a47; font-size: 14px; line-height: 1; font-weight: 650; } /* ============================================================ FORM GRID ============================================================ */ ._formGridFive_17xog_401 { display: grid; grid-template-columns: 1.05fr 1.08fr 0.85fr 0.9fr 1.05fr; gap: 15px 21px; } ._formGridThree_17xog_423 { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 14px 16px; } ._twoColumnLayout_17xog_435 { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: 10px; margin-top: 10px; } ._formField_17xog_453 { min-width: 0; } /* ============================================================ LABEL ============================================================ */ ._fieldLabel_17xog_469 { display: flex; align-items: center; min-height: 15px; margin-bottom: 6px; color: #263653; font-size: 11px; line-height: 1.2; font-weight: 600; } ._requiredMark_17xog_491 { margin-left: 3px; color: #ef4444; font-weight: 700; } /* ============================================================ TEXT INPUT ============================================================ */ ._textField_17xog_511 { width: 100%; height: 35px; padding: 0 11px; box-sizing: border-box; border: 1px solid #dce3ed; border-radius: 6px; outline: none; background: #ffffff; color: #34425c; font-family: inherit; font-size: 11px; font-weight: 500; transition: border-color 0.15s ease, box-shadow 0.15s ease; } ._textField_17xog_511::placeholder { color: #a3adbd; } ._textField_17xog_511:hover { border-color: #cbd5e1; } ._textField_17xog_511:focus { border-color: #1769ff; box-shadow: 0 0 0 2px rgba(23, 105, 255, 0.08); } ._textField_17xog_511:disabled { color: #68758a; background: #f2f5f9; cursor: not-allowed; } /* ============================================================ SELECT ============================================================ */ ._selectWrapper_17xog_593 { position: relative; width: 100%; } ._selectField_17xog_603 { width: 100%; height: 35px; appearance: none; padding: 0 30px 0 11px; box-sizing: border-box; border: 1px solid #dce3ed; border-radius: 6px; outline: none; background: #ffffff; color: #34425c; font-family: inherit; font-size: 11px; font-weight: 500; cursor: pointer; } ._selectField_17xog_603:hover { border-color: #cbd5e1; } ._selectField_17xog_603:focus { border-color: #1769ff; box-shadow: 0 0 0 2px rgba(23, 105, 255, 0.08); } ._selectField_17xog_603:disabled { color: #7b8799; background: #f3f5f8; cursor: not-allowed; } ._selectArrow_17xog_667 { position: absolute; top: 50%; right: 10px; transform: translateY(-58%); pointer-events: none; color: #687891; font-size: 15px; line-height: 1; } /* ============================================================ DATE ============================================================ */ ._dateFieldWrapper_17xog_697 { position: relative; width: 100%; } ._dateIcon_17xog_707 { position: absolute; top: 50%; left: 10px; z-index: 1; transform: translateY(-50%); color: #65758e; pointer-events: none; } ._dateField_17xog_697 { width: 100%; height: 35px; padding: 0 10px 0 32px; box-sizing: border-box; border: 1px solid #dce3ed; border-radius: 6px; outline: none; background: #ffffff; color: #34425c; font-family: inherit; font-size: 11px; font-weight: 500; } ._dateField_17xog_697:focus { border-color: #1769ff; box-shadow: 0 0 0 2px rgba(23, 105, 255, 0.08); } /* ============================================================ CURRENCY ============================================================ */ ._currencyField_17xog_775 { width: 100%; height: 35px; display: flex; align-items: center; box-sizing: border-box; border: 1px solid #dce3ed; border-radius: 6px; overflow: hidden; background: #ffffff; } ._currencyField_17xog_775:focus-within { border-color: #1769ff; box-shadow: 0 0 0 2px rgba(23, 105, 255, 0.08); } ._currencyPrefix_17xog_809 { height: 100%; min-width: 45px; display: flex; align-items: center; justify-content: center; flex-shrink: 0; border-right: 1px solid #e0e6ee; color: #68758a; background: #f7f9fb; font-size: 10px; font-weight: 600; } ._currencyInput_17xog_837 { width: 100%; height: 100%; padding: 0 10px; border: 0; outline: none; background: transparent; color: #34425c; font-family: inherit; font-size: 11px; font-weight: 500; } ._currencyInput_17xog_837::-webkit-inner-spin-button, ._currencyInput_17xog_837::-webkit-outer-spin-button { margin: 0; appearance: none; } ._currencyInput_17xog_837[type="number"] { appearance: textfield; } ._currencyField_17xog_775:has(._currencyInput_17xog_837:disabled) { background: #f2f5f9; } ._currencyInput_17xog_837:disabled { color: #69768a; cursor: not-allowed; } /* ============================================================ HELPER ============================================================ */ ._helperText_17xog_909 { margin: 8px 0 0; color: #8a96a9; font-size: 10px; line-height: 1.4; } /* ============================================================ STATUS ============================================================ */ ._statusSelectWrapper_17xog_931 { position: relative; } ._statusSelectWrapper_17xog_931 ._selectField_17xog_603 { padding-left: 29px; } ._statusDot_17xog_947 { position: absolute; top: 50%; left: 12px; z-index: 2; width: 7px; height: 7px; border-radius: 50%; transform: translateY(-50%); pointer-events: none; } ._statusPaid_17xog_971 { background: #17b978; } ._statusPending_17xog_979 { background: #f2a000; } ._statusFailed_17xog_987 { background: #ef4444; } /* ============================================================ AUTO RECEIPT ============================================================ */ ._autoReceiptField_17xog_1003 { min-width: 0; } ._autoReceiptControl_17xog_1011 { height: 35px; display: flex; align-items: center; gap: 9px; } ._toggle_17xog_1025 { position: relative; width: 31px; height: 18px; flex-shrink: 0; padding: 0; border: 0; border-radius: 20px; background: #cbd5e1; cursor: pointer; transition: background 0.15s ease; } ._toggleActive_17xog_1051 { background: #1769ff; } ._toggleKnob_17xog_1059 { position: absolute; top: 3px; left: 3px; width: 12px; height: 12px; border-radius: 50%; background: #ffffff; box-shadow: 0 1px 2px rgba(0, 0, 0, 0.15); transition: transform 0.15s ease; } ._toggleActive_17xog_1051 ._toggleKnob_17xog_1059 { transform: translateX(13px); } ._toggleText_17xog_1091 { color: #7b879c; font-size: 10px; line-height: 1.3; white-space: nowrap; } /* ============================================================ CUSTOMER DETAILS ============================================================ */ ._customerTopGrid_17xog_1113 { display: grid; grid-template-columns: 1fr 1fr 1fr; gap: 14px 16px; margin-bottom: 11px; } ._phoneField_17xog_1133 { width: 100%; height: 35px; display: flex; align-items: center; box-sizing: border-box; border: 1px solid #dce3ed; border-radius: 6px; overflow: hidden; background: #ffffff; } ._phoneField_17xog_1133:focus-within { border-color: #1769ff; box-shadow: 0 0 0 2px rgba(23, 105, 255, 0.08); } ._phoneCountry_17xog_1167 { height: 100%; min-width: 51px; display: flex; align-items: center; justify-content: center; gap: 5px; border-right: 1px solid #e0e6ee; color: #69778c; background: #ffffff; } ._sgFlag_17xog_1191 { font-size: 13px; line-height: 1; } ._phoneChevron_17xog_1201 { font-size: 12px; line-height: 1; } ._phoneInput_17xog_1211 { width: 100%; height: 100%; padding: 0 10px; border: 0; outline: 0; background: transparent; color: #34425c; font-family: inherit; font-size: 11px; font-weight: 500; } ._addressTextArea_17xog_1237 { width: 100%; min-height: 55px; padding: 9px 11px; box-sizing: border-box; resize: vertical; border: 1px solid #dce3ed; border-radius: 6px; outline: none; background: #ffffff; color: #34425c; font-family: inherit; font-size: 11px; line-height: 1.45; } ._addressTextArea_17xog_1237:focus { border-color: #1769ff; box-shadow: 0 0 0 2px rgba(23, 105, 255, 0.08); } /* ============================================================ NOTES ============================================================ */ ._notesGrid_17xog_1287 { display: grid; grid-template-columns: 1fr 1fr; gap: 20px; } ._textAreaWrapper_17xog_1303 { position: relative; } ._textArea_17xog_1303 { width: 100%; min-height: 81px; padding: 9px 10px 22px; box-sizing: border-box; resize: vertical; border: 1px solid #dce3ed; border-radius: 6px; outline: none; background: #ffffff; color: #34425c; font-family: inherit; font-size: 11px; line-height: 1.45; } ._textArea_17xog_1303:focus { border-color: #1769ff; box-shadow: 0 0 0 2px rgba(23, 105, 255, 0.08); } ._textArea_17xog_1303::placeholder { color: #a3adbd; } ._textAreaCount_17xog_1361 { position: absolute; bottom: -17px; left: 1px; color: #7d899e; font-size: 10px; } /* ============================================================ PAYMENT SUMMARY ============================================================ */ ._paymentSummary_17xog_1385 { width: 100%; min-height: 101px; display: grid; grid-template-columns: minmax(0, 1fr) auto minmax(0, 1fr) auto minmax(0, 1fr) auto minmax(0, 1.18fr); align-items: stretch; margin-top: 10px; padding: 10px 18px; box-sizing: border-box; background: #ffffff; border: 1px solid #e4e9f1; border-radius: 10px; box-shadow: 0 2px 5px rgba(24, 39, 75, 0.02), 0 7px 18px rgba(24, 39, 75, 0.025); } ._summaryItem_17xog_1433 { min-width: 0; display: flex; align-items: center; gap: 15px; padding: 0 18px 0 0; } ._summaryItemHighlight_17xog_1449 { margin: 0 0 0 0; padding-left: 18px; border-radius: 9px; background: #f3f7ff; } ._summaryIcon_17xog_1463 { width: 54px; height: 54px; display: inline-flex; align-items: center; justify-content: center; flex-shrink: 0; border-radius: 50%; } ._summaryBlue_17xog_1483 { color: #1769ff; background: #eaf2ff; } ._summaryGreen_17xog_1493 { color: #13b879; background: #e3f8ee; } ._summaryOrange_17xog_1503 { color: #f0a000; background: #fff2dc; } ._summaryPurple_17xog_1513 { color: #1769ff; background: #eaf2ff; } ._summaryContent_17xog_1523 { min-width: 0; display: flex; flex-direction: column; } ._summaryLabel_17xog_1535 { color: #66738b; font-size: 11px; line-height: 1.3; font-weight: 500; } ._summaryValue_17xog_1549 { margin-top: 5px; color: #172640; font-size: 17px; line-height: 1.1; font-weight: 700; white-space: nowrap; } ._summaryValueHighlight_17xog_1567 { color: #1769ff; } ._summaryDescription_17xog_1575 { margin-top: 4px; color: #8490a4; font-size: 9px; line-height: 1.3; } ._summaryDivider_17xog_1589 { width: 1px; height: 63px; align-self: center; background: #e9edf3; } /* ============================================================ BOTTOM ACTIONS ============================================================ */ ._bottomActions_17xog_1611 { display: flex; justify-content: flex-end; margin-top: 14px; } ._bottomCreateButton_17xog_269 { height: 37px; display: inline-flex; align-items: center; justify-content: center; gap: 8px; padding: 0 17px; border: 1px solid #1769ff; border-radius: 7px; color: #ffffff; background: #1769ff; font-family: inherit; font-size: 12px; font-weight: 600; cursor: pointer; box-shadow: 0 3px 8px rgba(23, 105, 255, 0.18); transition: background 0.15s ease, border-color 0.15s ease, box-shadow 0.15s ease, transform 0.15s ease; } ._bottomCreateButton_17xog_269:hover { background: #0f5ce6; border-color: #0f5ce6; box-shadow: 0 5px 12px rgba(23, 105, 255, 0.22); } /* ============================================================ RESPONSIVE ============================================================ */ @media (max-width: 1400px) { ._paymentCreatePage_17xog_9 { padding-left: 22px; padding-right: 22px; } ._formGridFive_17xog_401 { gap: 13px 15px; } ._summaryItem_17xog_1433 { gap: 11px; padding-right: 12px; } ._summaryItemHighlight_17xog_1449 { padding-left: 12px; } ._summaryIcon_17xog_1463 { width: 48px; height: 48px; } ._summaryValue_17xog_1549 { font-size: 16px; } } /* ============================================================ MEDIUM DESKTOP ============================================================ */ @media (max-width: 1180px) { ._formGridFive_17xog_401 { grid-template-columns: repeat(3, minmax(0, 1fr)); } ._twoColumnLayout_17xog_435 { grid-template-columns: 1fr; } ._paymentSummary_17xog_1385 { grid-template-columns: 1fr auto 1fr auto 1fr auto 1.1fr; } } /* ============================================================ TABLET ============================================================ */ @media (max-width: 900px) { ._paymentCreatePage_17xog_9 { padding: 20px 16px 25px; } ._pageHeader_17xog_35 { flex-direction: column; } ._headerActions_17xog_157 { width: 100%; justify-content: flex-end; padding-top: 0; } ._formGridFive_17xog_401, ._formGridThree_17xog_423 { grid-template-columns: repeat(2, minmax(0, 1fr)); } ._customerTopGrid_17xog_1113 { grid-template-columns: repeat(2, minmax(0, 1fr)); } ._notesGrid_17xog_1287 { grid-template-columns: 1fr; gap: 15px; } ._paymentSummary_17xog_1385 { grid-template-columns: 1fr 1fr; gap: 0; } ._summaryDivider_17xog_1589 { display: none; } ._summaryItem_17xog_1433 { min-height: 80px; padding: 8px; } ._summaryItemHighlight_17xog_1449 { padding-left: 8px; } } /* ============================================================ MOBILE ============================================================ */ @media (max-width: 620px) { ._paymentCreatePage_17xog_9 { padding: 16px 12px 22px; } ._pageHeader_17xog_35 { gap: 15px; } ._pageTitle_17xog_125 { font-size: 23px; } ._pageSubtitle_17xog_143 { font-size: 11px; } ._breadcrumb_17xog_59 { gap: 7px; font-size: 11px; } ._breadcrumbLink_17xog_77 { font-size: 11px; } ._headerActions_17xog_157 { justify-content: flex-start; } ._cancelButton_17xog_173, ._saveButton_17xog_175 { height: 35px; } ._formGridFive_17xog_401, ._formGridThree_17xog_423, ._customerTopGrid_17xog_1113 { grid-template-columns: 1fr; } ._formSection_17xog_285 { padding: 11px 13px 14px; } ._sectionTitle_17xog_379 { font-size: 13px; } ._twoColumnLayout_17xog_435 { margin-top: 9px; } ._paymentSummary_17xog_1385 { grid-template-columns: 1fr; padding: 8px 12px; } ._summaryItem_17xog_1433, ._summaryItemHighlight_17xog_1449 { min-height: 74px; padding: 8px 5px; } ._summaryIcon_17xog_1463 { width: 44px; height: 44px; } ._summaryValue_17xog_1549 { font-size: 15px; } ._bottomActions_17xog_1611 { margin-top: 12px; } ._bottomCreateButton_17xog_269 { width: 100%; } } /* ============================================================ PAYMENT VIEW PAGE ============================================================ */ ._paymentViewPage_sg1is_9 { width: 100%; min-height: 100%; padding: 26px 28px 30px; box-sizing: border-box; background: #f8fafc; color: #14213d; } /* ============================================================ PAGE HEADER ============================================================ */ ._pageHeader_sg1is_35 { display: flex; align-items: flex-start; justify-content: space-between; gap: 24px; margin-bottom: 18px; } ._headerLeft_sg1is_51 { min-width: 0; } ._breadcrumb_sg1is_59 { display: flex; align-items: center; gap: 9px; margin-bottom: 7px; color: #94a0b4; font-size: 12px; line-height: 1; } ._breadcrumbLink_sg1is_79 { padding: 0; border: 0; background: transparent; color: #1769ff; font-family: inherit; font-size: 12px; font-weight: 600; cursor: pointer; } ._breadcrumbLink_sg1is_79:hover { text-decoration: underline; } ._breadcrumbCurrent_sg1is_109 { color: #7c889d; font-weight: 500; } ._titleRow_sg1is_119 { display: flex; align-items: flex-start; } ._pageTitle_sg1is_129 { margin: 0; color: #14213d; font-size: 28px; line-height: 1.2; font-weight: 700; letter-spacing: -0.65px; } ._pageSubtitle_sg1is_147 { margin: 6px 0 0; color: #8190a8; font-size: 13px; line-height: 1.5; } ._mobileBackButton_sg1is_161 { display: none; } /* ============================================================ HEADER ACTIONS ============================================================ */ ._headerActions_sg1is_177 { display: flex; align-items: center; gap: 10px; padding-top: 28px; flex-shrink: 0; } ._secondaryButton_sg1is_193, ._refundButton_sg1is_195, ._primaryButton_sg1is_197 { height: 38px; display: inline-flex; align-items: center; justify-content: center; gap: 8px; padding: 0 15px; border-radius: 7px; box-sizing: border-box; font-family: inherit; font-size: 12px; font-weight: 600; cursor: pointer; transition: background 0.15s ease, border-color 0.15s ease, box-shadow 0.15s ease, transform 0.15s ease; } ._secondaryButton_sg1is_193 { color: #34435e; background: #ffffff; border: 1px solid #dfe5ee; } ._secondaryButton_sg1is_193:hover { background: #f8fafc; border-color: #cbd4e1; } ._refundButton_sg1is_195 { color: #ef3038; background: #fffafa; border: 1px solid #ff999d; } ._refundButton_sg1is_195:hover { background: #fff1f1; border-color: #ff7278; } ._primaryButton_sg1is_197 { color: #ffffff; background: #1769ff; border: 1px solid #1769ff; padding-left: 16px; padding-right: 17px; box-shadow: 0 4px 10px rgba(23, 105, 255, 0.18); } ._primaryButton_sg1is_197:hover { background: #0f5ce6; border-color: #0f5ce6; box-shadow: 0 5px 13px rgba(23, 105, 255, 0.22); } ._primaryButton_sg1is_197:active, ._secondaryButton_sg1is_193:active, ._refundButton_sg1is_195:active { transform: translateY(1px); } /* ============================================================ TOP SUMMARY CARDS ============================================================ */ ._summaryGrid_sg1is_331 { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 16px; margin-bottom: 14px; } ._infoCard_sg1is_345 { min-height: 106px; display: flex; align-items: center; gap: 17px; padding: 17px 20px; box-sizing: border-box; background: #ffffff; border: 1px solid #e5eaf1; border-radius: 10px; box-shadow: 0 2px 5px rgba(24, 39, 75, 0.022), 0 8px 20px rgba(24, 39, 75, 0.03); } ._infoCardIcon_sg1is_375 { width: 45px; height: 45px; display: flex; align-items: center; justify-content: center; flex-shrink: 0; border-radius: 50%; } ._blueIcon_sg1is_395 { color: #1769ff; background: #eaf2ff; } ._greenIcon_sg1is_405 { color: #10ad72; background: #e4f8ef; } ._infoCardContent_sg1is_415 { min-width: 0; } ._infoCardLabel_sg1is_423 { margin-bottom: 7px; color: #728099; font-size: 10px; line-height: 1; font-weight: 600; letter-spacing: 0.3px; } ._infoCardValue_sg1is_441 { min-width: 0; color: #172644; font-size: 18px; line-height: 1.25; font-weight: 700; white-space: nowrap; } ._infoCardDescription_sg1is_459 { margin-top: 6px; color: #8290a7; font-size: 11px; line-height: 1.3; } /* ============================================================ STATUS ============================================================ */ ._statusBadge_sg1is_481 { display: inline-flex; align-items: center; justify-content: center; gap: 7px; min-height: 25px; padding: 0 10px; box-sizing: border-box; border-radius: 7px; font-size: 10px; line-height: 1; font-weight: 600; vertical-align: middle; } ._statusSuccess_sg1is_511 { color: #109d68; background: #e1f7ec; } ._statusNeutral_sg1is_521 { color: #637188; background: #edf0f4; } ._statusDot_sg1is_531 { width: 6px; height: 6px; border-radius: 50%; background: currentColor; } /* ============================================================ MAIN CONTENT CARD ============================================================ */ ._contentCard_sg1is_553 { width: 100%; background: #ffffff; border: 1px solid #e5eaf1; border-radius: 10px; box-shadow: 0 2px 5px rgba(24, 39, 75, 0.02), 0 8px 22px rgba(24, 39, 75, 0.03); overflow: hidden; } /* ============================================================ TABS ============================================================ */ ._tabs_sg1is_583 { height: 43px; display: flex; align-items: stretch; gap: 2px; padding: 0 12px; border-bottom: 1px solid #e7ebf1; box-sizing: border-box; } ._tabButton_sg1is_603 { position: relative; min-width: 108px; padding: 0 20px; border: 0; background: transparent; color: #697995; font-family: inherit; font-size: 12px; font-weight: 500; cursor: pointer; } ._tabButton_sg1is_603:hover { color: #1769ff; } ._activeTab_sg1is_637 { color: #1769ff; font-weight: 600; } ._activeTab_sg1is_637::after { content: ""; position: absolute; left: 12px; right: 12px; bottom: -1px; height: 2px; background: #1769ff; border-radius: 2px 2px 0 0; } /* ============================================================ OVERVIEW ============================================================ */ ._overviewContent_sg1is_677 { padding: 14px 9px 10px; } /* ============================================================ DETAIL GRID ============================================================ */ ._detailGrid_sg1is_693 { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 14px; } ._detailCard_sg1is_705 { min-height: 272px; padding: 16px 16px 15px; box-sizing: border-box; background: #ffffff; border: 1px solid #e4e9f0; border-radius: 9px; } ._sectionHeader_sg1is_723 { display: flex; align-items: center; gap: 10px; min-height: 25px; margin-bottom: 16px; } ._sectionHeaderIcon_sg1is_739 { width: 28px; height: 28px; display: flex; align-items: center; justify-content: center; flex-shrink: 0; border-radius: 7px; color: #1769ff; background: #edf4ff; } ._sectionTitle_sg1is_763 { margin: 0; color: #425576; font-size: 13px; line-height: 1.2; font-weight: 600; } ._detailRows_sg1is_779 { display: flex; flex-direction: column; } ._detailRow_sg1is_779 { display: flex; align-items: flex-start; justify-content: space-between; gap: 12px; min-height: 32px; color: #55647e; font-size: 11px; line-height: 1.45; } ._detailLabel_sg1is_811 { flex: 0 0 auto; color: #71809a; font-weight: 500; } ._detailValue_sg1is_823 { min-width: 0; color: #344563; font-weight: 500; text-align: right; } ._planBadge_sg1is_837 { display: inline-flex; align-items: center; min-height: 24px; padding: 0 10px; border-radius: 7px; color: #1769ff; background: #eaf2ff; font-size: 10px; font-weight: 600; } ._emailValue_sg1is_861 { color: #344563; word-break: break-word; } ._addressValue_sg1is_871 { display: flex; flex-direction: column; text-align: right; line-height: 1.55; } ._transactionId_sg1is_885 { max-width: 145px; overflow-wrap: anywhere; text-align: right; } ._pricingDivider_sg1is_897 { width: 100%; height: 1px; margin: 5px 0 9px; background: #e5eaf1; } ._totalRow_sg1is_911 { min-height: 30px; } ._totalRow_sg1is_911 ._detailLabel_sg1is_811 { color: #263958; font-weight: 600; } ._totalRow_sg1is_911 ._detailValue_sg1is_823 { color: #172644; font-size: 13px; font-weight: 700; } /* ============================================================ BOTTOM GRID ============================================================ */ ._bottomGrid_sg1is_949 { display: grid; grid-template-columns: minmax(0, 1.08fr) minmax(0, 0.92fr); gap: 14px; margin-top: 14px; } ._invoiceCard_sg1is_963, ._timelineCard_sg1is_965 { min-height: 280px; padding: 16px 14px 14px; box-sizing: border-box; border: 1px solid #e4e9f0; border-radius: 9px; background: #ffffff; } /* ============================================================ INVOICE TABLE ============================================================ */ ._invoiceTableWrapper_sg1is_991 { width: 100%; overflow-x: auto; border: 1px solid #e4e9f0; border-radius: 8px; } ._invoiceTable_sg1is_991 { width: 100%; min-width: 650px; border-collapse: collapse; table-layout: auto; } ._invoiceTable_sg1is_991 th { height: 35px; padding: 0 12px; background: #f8fafc; border-bottom: 1px solid #e4e9f0; color: #71809a; font-size: 10px; line-height: 1; font-weight: 600; text-align: left; white-space: nowrap; } ._invoiceTable_sg1is_991 td { height: 46px; padding: 0 12px; border-bottom: 1px solid #edf0f4; color: #465670; font-size: 10px; font-weight: 500; white-space: nowrap; } ._invoiceTable_sg1is_991 tbody tr:last-child td { border-bottom: 0; } ._invoiceTable_sg1is_991 tbody tr:hover { background: #fbfcfe; } ._invoiceLink_sg1is_1081 { padding: 0; border: 0; background: transparent; color: #1769ff; font-family: inherit; font-size: 10px; font-weight: 600; cursor: pointer; } ._invoiceLink_sg1is_1081:hover { text-decoration: underline; } ._moreButton_sg1is_1111 { width: 28px; height: 28px; display: inline-flex; align-items: center; justify-content: center; padding: 0; border: 1px solid #e0e6ef; border-radius: 6px; background: #ffffff; color: #4d5c76; cursor: pointer; } ._moreButton_sg1is_1111:hover { background: #f7f9fc; border-color: #ccd5e2; } ._invoiceFooter_sg1is_1149 { display: flex; align-items: center; justify-content: space-between; gap: 15px; margin-top: 12px; padding: 0 1px; color: #7b89a1; font-size: 10px; } ._viewAllButton_sg1is_1171, ._fullTimelineButton_sg1is_1173 { padding: 0; border: 0; background: transparent; color: #1769ff; font-family: inherit; font-size: 11px; font-weight: 600; cursor: pointer; } ._viewAllButton_sg1is_1171:hover, ._fullTimelineButton_sg1is_1173:hover { text-decoration: underline; } /* ============================================================ TIMELINE ============================================================ */ ._timeline_sg1is_965 { display: flex; flex-direction: column; margin-top: 2px; } ._timelineItem_sg1is_1225 { display: flex; min-height: 70px; } ._timelineMarkerWrapper_sg1is_1235 { position: relative; width: 25px; display: flex; justify-content: center; flex-shrink: 0; } ._timelineDot_sg1is_1251 { position: relative; z-index: 2; width: 9px; height: 9px; margin-top: 6px; border-radius: 50%; background: #10b978; box-shadow: 0 0 0 4px #e7f8f0; } ._timelineLine_sg1is_1273 { position: absolute; top: 15px; bottom: 0; left: 12px; width: 1px; background: #dce6e1; } ._timelineContent_sg1is_1291 { flex: 1; min-width: 0; padding: 0 0 14px 8px; } ._timelineTop_sg1is_1303 { display: flex; justify-content: space-between; gap: 20px; } ._timelineTitle_sg1is_1315 { color: #30415f; font-size: 11px; line-height: 1.35; font-weight: 700; } ._timelineDescription_sg1is_1329 { margin-top: 5px; color: #8793a8; font-size: 10px; line-height: 1.45; } ._timelineMeta_sg1is_1343 { display: flex; flex-direction: column; align-items: flex-end; gap: 5px; flex-shrink: 0; color: #7c8aa3; font-size: 9px; line-height: 1.35; text-align: right; } ._fullTimelineButton_sg1is_1173 { margin-top: 3px; } /* ============================================================ TABS PLACEHOLDER ============================================================ */ ._tabPlaceholder_sg1is_1383 { min-height: 420px; display: flex; flex-direction: column; align-items: center; justify-content: center; padding: 40px; box-sizing: border-box; text-align: center; } ._placeholderIcon_sg1is_1405 { width: 52px; height: 52px; display: flex; align-items: center; justify-content: center; margin-bottom: 14px; border-radius: 50%; color: #1769ff; background: #eaf2ff; } ._tabPlaceholder_sg1is_1383 h3 { margin: 0; color: #263958; font-size: 16px; font-weight: 700; } ._tabPlaceholder_sg1is_1383 p { max-width: 430px; margin: 8px 0 0; color: #8491a7; font-size: 12px; line-height: 1.6; } /* ============================================================ ACTIVITY TAB ============================================================ */ ._activityTab_sg1is_1467 { min-height: 420px; padding: 22px 25px; box-sizing: border-box; } ._fullTimeline_sg1is_1173 { max-width: 850px; margin-top: 24px; } ._fullTimeline_sg1is_1173 ._timelineItem_sg1is_1225 { min-height: 90px; } ._fullTimelineMeta_sg1is_1497 { margin-top: 8px; color: #8a96aa; font-size: 10px; } /* ============================================================ RESPONSIVE ============================================================ */ @media (max-width: 1400px) { ._paymentViewPage_sg1is_9 { padding-left: 22px; padding-right: 22px; } ._summaryGrid_sg1is_331 { gap: 12px; } ._infoCard_sg1is_345 { padding-left: 15px; padding-right: 15px; gap: 12px; } ._infoCardValue_sg1is_441 { font-size: 16px; } ._detailGrid_sg1is_693 { gap: 10px; } ._detailCard_sg1is_705 { padding-left: 13px; padding-right: 13px; } ._detailRow_sg1is_779 { gap: 8px; } } @media (max-width: 1180px) { ._pageHeader_sg1is_35 { flex-direction: column; } ._headerActions_sg1is_177 { padding-top: 0; } ._summaryGrid_sg1is_331 { grid-template-columns: repeat(2, minmax(0, 1fr)); } ._detailGrid_sg1is_693 { grid-template-columns: repeat(2, minmax(0, 1fr)); } ._bottomGrid_sg1is_949 { grid-template-columns: 1fr; } } @media (max-width: 800px) { ._paymentViewPage_sg1is_9 { padding: 20px 16px 24px; } ._pageHeader_sg1is_35 { margin-bottom: 16px; } ._breadcrumb_sg1is_59 { margin-bottom: 10px; } ._pageTitle_sg1is_129 { font-size: 24px; } ._pageSubtitle_sg1is_147 { font-size: 12px; } ._headerActions_sg1is_177 { width: 100%; } ._secondaryButton_sg1is_193, ._refundButton_sg1is_195, ._primaryButton_sg1is_197 { flex: 1; min-width: 0; } ._summaryGrid_sg1is_331 { grid-template-columns: 1fr 1fr; gap: 10px; } ._infoCard_sg1is_345 { min-height: 95px; padding: 13px; } ._infoCardIcon_sg1is_375 { width: 38px; height: 38px; } ._infoCardValue_sg1is_441 { font-size: 14px; } ._infoCardLabel_sg1is_423 { font-size: 9px; } ._infoCardDescription_sg1is_459 { font-size: 10px; } ._tabs_sg1is_583 { overflow-x: auto; padding: 0 5px; } ._tabButton_sg1is_603 { min-width: 90px; padding: 0 13px; } ._overviewContent_sg1is_677 { padding: 10px; } ._detailGrid_sg1is_693 { grid-template-columns: 1fr; } ._detailCard_sg1is_705 { min-height: auto; } ._bottomGrid_sg1is_949 { gap: 10px; } ._invoiceCard_sg1is_963, ._timelineCard_sg1is_965 { min-height: auto; } ._timelineTop_sg1is_1303 { flex-direction: column; gap: 5px; } ._timelineMeta_sg1is_1343 { align-items: flex-start; text-align: left; } } @media (max-width: 520px) { ._paymentViewPage_sg1is_9 { padding: 16px 12px 20px; } ._pageHeader_sg1is_35 { gap: 14px; } ._breadcrumb_sg1is_59 { gap: 6px; font-size: 10px; } ._breadcrumbLink_sg1is_79, ._breadcrumbCurrent_sg1is_109 { font-size: 10px; } ._titleRow_sg1is_119 { gap: 8px; } ._mobileBackButton_sg1is_161 { width: 32px; height: 32px; display: inline-flex; align-items: center; justify-content: center; flex-shrink: 0; margin-top: 1px; padding: 0; border: 1px solid #dfe5ee; border-radius: 7px; background: #ffffff; color: #425576; cursor: pointer; } ._pageTitle_sg1is_129 { font-size: 21px; letter-spacing: -0.4px; } ._pageSubtitle_sg1is_147 { display: none; } ._headerActions_sg1is_177 { gap: 7px; } ._secondaryButton_sg1is_193, ._refundButton_sg1is_195, ._primaryButton_sg1is_197 { height: 35px; padding: 0 9px; font-size: 10px; gap: 5px; } ._summaryGrid_sg1is_331 { grid-template-columns: 1fr; } ._infoCard_sg1is_345 { min-height: 82px; } ._infoCardValue_sg1is_441 { font-size: 15px; } ._tabs_sg1is_583 { height: 40px; } ._tabButton_sg1is_603 { min-width: 78px; padding: 0 8px; font-size: 10px; } ._activeTab_sg1is_637::after { left: 8px; right: 8px; } ._detailCard_sg1is_705 { padding: 14px 12px; } ._sectionHeader_sg1is_723 { margin-bottom: 13px; } ._sectionTitle_sg1is_763 { font-size: 12px; } ._detailRow_sg1is_779 { font-size: 10px; } ._detailValue_sg1is_823 { max-width: 60%; } ._invoiceFooter_sg1is_1149 { align-items: flex-start; flex-direction: column; } ._activityTab_sg1is_1467 { padding: 18px 14px; } } /* ============================================================ ORGANIZATION PAGE ============================================================ */ ._organizationPage_y3wol_9 { width: 100%; min-height: 100%; padding: 26px 28px 30px; box-sizing: border-box; background: #f8fafc; } /* ============================================================ PAGE HEADER ============================================================ */ ._organizationPageHeader_y3wol_33 { display: flex; align-items: flex-start; justify-content: space-between; margin-bottom: 22px; } ._organizationPageTitle_y3wol_47 { margin: 0; color: #14213d; font-size: 28px; line-height: 1.2; font-weight: 700; letter-spacing: -0.6px; } /* ============================================================ SUMMARY GRID ============================================================ */ ._organizationSummaryGrid_y3wol_73 { display: grid; grid-template-columns: repeat(5, minmax(0, 1fr)); gap: 18px; margin-bottom: 26px; } /* ============================================================ SUMMARY CARD ============================================================ */ ._organizationSummaryCard_y3wol_95 { position: relative; min-height: 142px; padding: 19px 20px 17px; box-sizing: border-box; background: #ffffff; border: 1px solid #e7ebf2; border-radius: 11px; box-shadow: 0 2px 5px rgba(24, 39, 75, 0.025), 0 8px 20px rgba(24, 39, 75, 0.035); overflow: hidden; } ._organizationSummaryCard_y3wol_95::before { content: ""; position: absolute; top: -1px; left: 0; right: 0; height: 3px; border-radius: 10px 10px 0 0; } /* ============================================================ SUMMARY TOP BORDERS ============================================================ */ ._totalCard_y3wol_151::before { background: #1769ff; } ._activeCard_y3wol_159::before { background: #13b879; } ._trialCard_y3wol_167::before { background: #f5a000; } ._suspendedCard_y3wol_175::before { background: #ff3d3d; } ._revenueCard_y3wol_183::before { background: #7d3cff; } /* ============================================================ SUMMARY CONTENT ============================================================ */ ._summaryCardTop_y3wol_199 { display: flex; align-items: center; justify-content: space-between; gap: 10px; } ._summaryCardLabel_y3wol_213 { color: #697791; font-size: 11px; line-height: 1.35; font-weight: 600; letter-spacing: 0.2px; } ._summaryCardIcon_y3wol_229 { width: 34px; height: 34px; display: flex; align-items: center; justify-content: center; flex-shrink: 0; border-radius: 50%; } /* ============================================================ SUMMARY ICON COLORS ============================================================ */ ._totalIcon_y3wol_257 { color: #1769ff; background: #eaf2ff; } ._activeIcon_y3wol_267 { color: #10a86f; background: #e4f8ef; } ._trialIcon_y3wol_277 { color: #e99a00; background: #fff3df; } ._suspendedIcon_y3wol_287 { color: #f0353a; background: #ffe8e8; } ._revenueIcon_y3wol_297 { color: #6c36e8; background: #f0e9ff; } /* ============================================================ SUMMARY VALUES ============================================================ */ ._summaryCardValue_y3wol_315 { margin-top: 20px; color: #14213d; font-size: 24px; line-height: 1; font-weight: 700; letter-spacing: -0.5px; } ._revenueValue_y3wol_333 { font-size: 20px; letter-spacing: -0.3px; white-space: nowrap; } ._summaryCardDescription_y3wol_345 { margin-top: 13px; color: #8a96aa; font-size: 11px; line-height: 1.4; } /* ============================================================ TABLE CARD ============================================================ */ ._organizationTableCard_y3wol_367 { width: 100%; background: #ffffff; border: 1px solid #e5eaf1; border-radius: 12px; box-shadow: 0 2px 5px rgba(24, 39, 75, 0.025), 0 8px 22px rgba(24, 39, 75, 0.035); overflow: visible; } /* ============================================================ TOOLBAR ============================================================ */ ._organizationToolbarActions_y3wol_397 { display: flex; align-items: center; gap: 10px; margin-left: 2px; } ._organizationExportBtn_y3wol_411, ._organizationCreateBtn_y3wol_413 { height: 36px; display: inline-flex; align-items: center; justify-content: center; gap: 7px; padding: 0 14px; border-radius: 7px; font-family: inherit; font-size: 12px; font-weight: 600; cursor: pointer; transition: background 0.15s ease, border-color 0.15s ease, box-shadow 0.15s ease, transform 0.15s ease; } /* ============================================================ EXPORT BUTTON ============================================================ */ ._organizationExportBtn_y3wol_411 { color: #1d2c49; background: #ffffff; border: 1px solid #e0e6ef; } ._organizationExportBtn_y3wol_411:hover { background: #f8fafc; border-color: #cfd7e4; } /* ============================================================ CREATE BUTTON ============================================================ */ ._organizationCreateBtn_y3wol_413 { color: #ffffff; background: #1769ff; border: 1px solid #1769ff; padding-left: 15px; padding-right: 16px; box-shadow: 0 3px 8px rgba(23, 105, 255, 0.18); } ._organizationCreateBtn_y3wol_413:hover { background: #0f5ce6; border-color: #0f5ce6; box-shadow: 0 5px 12px rgba(23, 105, 255, 0.22); } ._organizationCreateBtn_y3wol_413:active { transform: translateY(1px); } /* ============================================================ ORGANIZATION CELL ============================================================ */ ._organizationCell_y3wol_535 { display: flex; align-items: center; gap: 10px; min-width: 0; } ._organizationAvatar_y3wol_549 { width: 30px; height: 30px; display: inline-flex; align-items: center; justify-content: center; flex-shrink: 0; border-radius: 50%; color: #1769ff; background: #eaf2ff; font-size: 10px; font-weight: 700; } ._organizationName_y3wol_577 { color: #1d2d4b; font-size: 12px; font-weight: 600; white-space: nowrap; } /* ============================================================ PLAN BADGE ============================================================ */ ._planBadge_y3wol_599 { display: inline-flex; align-items: center; min-height: 22px; padding: 0 8px; border-radius: 6px; font-size: 10px; line-height: 1; font-weight: 600; white-space: nowrap; } ._planBlue_y3wol_623 { color: #1769ff; background: #edf4ff; } ._planPurple_y3wol_633 { color: #7040df; background: #f1ebff; } /* ============================================================ SUBSCRIPTION STATUS ============================================================ */ ._subscriptionStatus_y3wol_651 { display: inline-flex; align-items: center; justify-content: center; min-width: 54px; height: 23px; padding: 0 8px; box-sizing: border-box; border-radius: 6px; font-size: 10px; line-height: 1; font-weight: 600; } ._isActive_y3wol_679 { color: #109b67; background: #e2f7ed; } ._isTrial_y3wol_689 { color: #d98c00; background: #fff2dc; } ._isSuspended_y3wol_699 { color: #e13d43; background: #ffe5e7; } /* ============================================================ CONTACTS ============================================================ */ ._contactsValue_y3wol_717 { color: #34435e; font-size: 11px; font-weight: 500; white-space: nowrap; } /* ============================================================ RESPONSIVE ============================================================ */ @media (max-width: 1400px) { ._organizationSummaryGrid_y3wol_73 { gap: 13px; } ._organizationSummaryCard_y3wol_95 { padding-left: 16px; padding-right: 16px; } ._summaryCardLabel_y3wol_213 { font-size: 10px; } ._revenueValue_y3wol_333 { font-size: 18px; } } /* ============================================================ TABLET / MEDIUM ============================================================ */ @media (max-width: 1150px) { ._organizationSummaryGrid_y3wol_73 { grid-template-columns: repeat(3, minmax(0, 1fr)); } } /* ============================================================ MOBILE ============================================================ */ @media (max-width: 800px) { ._organizationPage_y3wol_9 { padding: 20px 16px; } ._organizationSummaryGrid_y3wol_73 { grid-template-columns: repeat(2, minmax(0, 1fr)); } ._organizationPageTitle_y3wol_47 { font-size: 24px; } ._organizationToolbarActions_y3wol_397 { gap: 6px; } ._organizationExportBtn_y3wol_411 span, ._organizationCreateBtn_y3wol_413 span { display: none; } ._organizationExportBtn_y3wol_411, ._organizationCreateBtn_y3wol_413 { width: 36px; padding: 0; } } /* ============================================================ SMALL MOBILE ============================================================ */ @media (max-width: 520px) { ._organizationPage_y3wol_9 { padding: 18px 12px 24px; } ._organizationSummaryGrid_y3wol_73 { grid-template-columns: 1fr; } ._organizationPageHeader_y3wol_33 { margin-bottom: 18px; } ._organizationPageTitle_y3wol_47 { font-size: 22px; } ._organizationSummaryCard_y3wol_95 { min-height: 135px; } }/* ================================================================ ORGANIZATION FORM PAGE ================================================================ */ ._page_pla3y_9 { width: 100%; min-width: 0; min-height: 100%; display: flex; flex-direction: column; padding: var(--space-4) var(--space-5) var(--space-6); box-sizing: border-box; gap: var(--space-4); background: var(--color-bg-light, #f5f7fb); } /* ================================================================ BACK LINK ================================================================ */ ._backLink_pla3y_53 { display: inline-flex; align-items: center; width: fit-content; padding: 0; border: none; background: transparent; color: var(--color-primary); font-size: var(--font-size-xs); font-weight: var(--font-weight-medium); cursor: pointer; } ._backLink_pla3y_53:hover { text-decoration: underline; } /* ================================================================ PAGE HEADER ================================================================ */ ._pageHeader_pla3y_107 { width: 100%; min-width: 0; display: flex; align-items: flex-start; justify-content: space-between; gap: var(--space-4); } ._titleRow_pla3y_129 { display: flex; align-items: center; gap: var(--space-2); margin-bottom: var(--space-1); } ._pageTitle_pla3y_147 { margin: 0; color: var(--text-primary-dark); font-size: var(--font-size-2xl); font-weight: var(--font-weight-bold); line-height: 1.2; } ._channelBadge_pla3y_169 { display: inline-flex; align-items: center; padding: 2px 8px; border-radius: var(--radius-sm); background: var(--color-success-soft, #e6f7ec); color: var(--color-success, #16a34a); font-size: var(--font-size-xs); font-weight: var(--font-weight-semibold); } ._pageDescription_pla3y_199 { margin: 0; color: var(--text-secondary); font-size: var(--font-size-xs); line-height: 1.5; } ._headerActions_pla3y_217 { display: flex; align-items: center; gap: var(--space-2); flex-shrink: 0; } /* ================================================================ COMMON CARD ================================================================ */ ._card_pla3y_243 { width: 100%; min-width: 0; box-sizing: border-box; padding: var(--space-4); background: var(--color-white); border: 1px solid var(--border-light); border-radius: var(--radius-lg); box-shadow: var(--shadow-sm); display: flex; flex-direction: column; gap: var(--space-3); } /* * Keep card contents away from the card border. * The card itself already has padding above. */ ._sectionTitle_pla3y_297 { margin: 0; display: flex; align-items: center; gap: var(--space-2); color: var(--text-primary-dark); font-size: var(--font-size-base); font-weight: var(--font-weight-semibold); line-height: 1.3; } ._sectionTitle_pla3y_297 span { color: var(--color-danger); } /* ================================================================ FORM GRID ================================================================ */ ._formGrid_pla3y_345 { width: 100%; min-width: 0; display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); column-gap: var(--space-4); row-gap: var(--space-3); } ._formGroup_pla3y_369 { min-width: 0; width: 100%; } ._formGroup_pla3y_369>label { display: block; margin-bottom: var(--space-1); color: var(--text-primary-dark); font-size: var(--font-size-xs); font-weight: var(--font-weight-medium); line-height: 1.4; } ._formGroup_pla3y_369>label span { margin-left: 2px; color: var(--color-danger); } /* ================================================================ INPUTS / SELECTS ================================================================ */ ._formGroup_pla3y_369 .app-input, ._formGroup_pla3y_369 .app-select { width: 100%; height: 34px; box-sizing: border-box; padding-top: 0; padding-bottom: 0; } /* ================================================================ INPUT WITH LEADING ICON ================================================================ */ ._inputWithIcon_pla3y_455 { position: relative; width: 100%; } ._inputWithIcon_pla3y_455 .app-input { width: 100%; padding-left: 30px; } ._fieldIcon_pla3y_479 { position: absolute; top: 50%; left: var(--space-2); width: 14px; height: 14px; transform: translateY(-50%); color: var(--text-secondary); pointer-events: none; z-index: 1; } /* ================================================================ WHATSAPP HEADER ================================================================ */ ._whatsappHeader_pla3y_523 { width: 100%; display: flex; align-items: center; justify-content: space-between; gap: var(--space-3); } /* ================================================================ WHATSAPP TOGGLE ================================================================ */ ._toggleSwitch_pla3y_551 { position: relative; width: 40px; height: 22px; flex-shrink: 0; padding: 0; border: none; border-radius: var(--radius-full); background: var(--border-default, #d7dee8); cursor: pointer; transition: background 0.2s ease; } ._toggleSwitchOn_pla3y_593 { background: var(--color-success, #16a34a); } ._toggleThumb_pla3y_601 { position: absolute; top: 2px; left: 2px; width: 18px; height: 18px; border-radius: var(--radius-full); background: var(--color-white); box-shadow: 0 1px 3px rgba(15, 23, 42, 0.25); transition: left 0.2s ease; } ._toggleSwitchOn_pla3y_593 ._toggleThumb_pla3y_601 { left: 20px; } /* ================================================================ RESPONSIVE ================================================================ */ @media (max-width: 900px) { ._formGrid_pla3y_345 { grid-template-columns: 1fr; } } @media (max-width: 700px) { ._page_pla3y_9 { padding: var(--space-3) var(--space-3) var(--space-5); } ._pageHeader_pla3y_107 { flex-direction: column; align-items: flex-start; gap: var(--space-3); } ._headerActions_pla3y_217 { width: 100%; } ._headerActions_pla3y_217 .app-btn { flex: 1; } } @media (max-width: 480px) { ._page_pla3y_9 { padding: var(--space-3); } ._card_pla3y_243 { padding: var(--space-3); } ._formGrid_pla3y_345 { row-gap: var(--space-3); } }/* ================================================================ ORGANIZATION VIEW PAGE ================================================================ */ ._page_oh4zb_9 { width: 100%; min-width: 0; min-height: 100%; display: flex; flex-direction: column; gap: var(--space-4); /* Space from screen/container edges */ padding: 20px 28px 30px; box-sizing: border-box; } /* ================================================================ BACK LINK ================================================================ */ ._backLink_oh4zb_49 { display: inline-flex; align-items: center; width: fit-content; padding: 0; border: none; background: transparent; color: var(--color-primary); font-size: var(--font-size-xs); font-weight: var(--font-weight-medium); cursor: pointer; } ._backLink_oh4zb_49:hover { text-decoration: underline; } /* ================================================================ PAGE HEADER ================================================================ */ ._pageHeader_oh4zb_103 { width: 100%; min-width: 0; display: flex; align-items: flex-start; justify-content: space-between; gap: var(--space-4); } ._headerLeft_oh4zb_125 { display: flex; align-items: center; gap: var(--space-3); min-width: 0; } /* ================================================================ AVATAR ================================================================ */ ._avatarLg_oh4zb_151 { width: 48px; height: 48px; flex-shrink: 0; display: flex; align-items: center; justify-content: center; border-radius: var(--radius-full); background: var(--color-primary-soft, #eef2ff); color: var(--color-primary); font-size: var(--font-size-base); font-weight: var(--font-weight-bold); } /* ================================================================ TITLE ================================================================ */ ._titleRow_oh4zb_197 { display: flex; align-items: center; gap: var(--space-2); margin-bottom: var(--space-1); } ._pageTitle_oh4zb_215 { margin: 0; font-size: var(--font-size-2xl); font-weight: var(--font-weight-bold); color: var(--text-primary-dark); } ._pageDescription_oh4zb_233 { margin: 0; font-size: var(--font-size-xs); color: var(--text-secondary); } /* ================================================================ HEADER ACTIONS ================================================================ */ ._headerActions_oh4zb_257 { display: flex; align-items: center; gap: var(--space-2); flex-shrink: 0; } ._headerActions_oh4zb_257 .app-btn { white-space: nowrap; } /* ================================================================ MAIN GRID ================================================================ */ ._mainGrid_oh4zb_291 { width: 100%; min-width: 0; /* * FULL WIDTH * No 300px right column. */ display: block; } /* ================================================================ LEFT COLUMN ================================================================ */ ._leftCol_oh4zb_321 { width: 100%; min-width: 0; display: flex; flex-direction: column; gap: var(--space-4); } /* ================================================================ COMMON CARD ================================================================ */ ._card_oh4zb_349 { width: 100%; min-width: 0; box-sizing: border-box; padding: var(--space-4); background: var(--color-white); border: 1px solid var(--border-light); border-radius: var(--radius-lg); box-shadow: var(--shadow-sm); display: flex; flex-direction: column; gap: var(--space-3); } /* ================================================================ SECTION TITLE ================================================================ */ ._sectionTitle_oh4zb_401 { margin: 0; display: flex; align-items: center; gap: var(--space-2); font-size: var(--font-size-base); font-weight: var(--font-weight-semibold); color: var(--text-primary-dark); } /* ================================================================ DETAIL GRID ================================================================ */ ._detailGrid_oh4zb_437 { width: 100%; min-width: 0; display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); column-gap: var(--space-5); row-gap: var(--space-4); } ._detailItem_oh4zb_461 { min-width: 0; display: flex; align-items: flex-start; gap: var(--space-2); } /* ================================================================ DETAIL ICON ================================================================ */ ._detailIcon_oh4zb_487 { width: 26px; height: 26px; flex-shrink: 0; display: flex; align-items: center; justify-content: center; margin-top: 1px; border-radius: var(--radius-md); background: var(--color-bg-light); color: var(--text-secondary); } /* ================================================================ DETAIL LABEL ================================================================ */ ._detailLabel_oh4zb_531 { margin-bottom: 2px; font-size: 10px; color: var(--text-secondary); } /* ================================================================ DETAIL VALUE ================================================================ */ ._detailValue_oh4zb_555 { min-width: 0; font-size: var(--font-size-xs); font-weight: var(--font-weight-medium); color: var(--text-primary-dark); overflow-wrap: anywhere; } /* ================================================================ LINK ================================================================ */ ._link_oh4zb_585 { color: var(--color-primary); text-decoration: none; overflow-wrap: anywhere; } ._link_oh4zb_585:hover { text-decoration: underline; } /* ================================================================ WHATSAPP HEADER ================================================================ */ ._whatsappHeader_oh4zb_617 { width: 100%; display: flex; align-items: center; justify-content: space-between; gap: var(--space-3); } /* ================================================================ STATUS ================================================================ */ ._statusOk_oh4zb_645 { display: inline-flex; align-items: center; gap: 4px; color: var(--color-success, #16a34a); } ._statusMissing_oh4zb_663 { display: inline-flex; align-items: center; gap: 4px; color: var(--text-secondary); } /* ================================================================ WARNING ================================================================ */ ._warnNote_oh4zb_689 { grid-column: 1 / -1; display: flex; align-items: center; gap: 6px; padding: var(--space-2) var(--space-3); border-radius: var(--radius-md); background: var(--color-warning-soft, #fef3c7); color: var(--color-warning, #b45309); font-size: var(--font-size-xs); } /* ================================================================ RESPONSIVE ================================================================ */ @media (max-width: 700px) { ._page_oh4zb_9 { padding: 16px 16px 24px; } ._pageHeader_oh4zb_103 { flex-direction: column; } ._headerLeft_oh4zb_125 { width: 100%; } ._headerActions_oh4zb_257 { width: 100%; } ._headerActions_oh4zb_257 .app-btn { flex: 1; } ._detailGrid_oh4zb_437 { grid-template-columns: 1fr; } } /* ================================================================ SMALL MOBILE ================================================================ */ @media (max-width: 480px) { ._page_oh4zb_9 { padding: 14px 12px 20px; } ._card_oh4zb_349 { padding: var(--space-3); } ._avatarLg_oh4zb_151 { width: 42px; height: 42px; } ._pageTitle_oh4zb_215 { font-size: var(--font-size-xl); } ._titleRow_oh4zb_197 { flex-wrap: wrap; } }/* ============================================================ PLANS & PRICING PAGE ============================================================ */ ._plansPricingPage_11g21_9 { width: 100%; min-width: 0; min-height: 100%; display: flex; flex-direction: column; gap: var(--space-4); padding: var(--space-4) var(--space-5) var(--space-5); box-sizing: border-box; background: var(--color-bg-light); color: var(--text-primary-dark); font-family: var(--font-family-base); font-size: var(--font-size-base); } /* ============================================================ PAGE HEADER ============================================================ */ ._plansPricingPageHeader_11g21_61 { display: flex; align-items: center; justify-content: space-between; gap: var(--space-4); } ._plansPricingHeaderContent_11g21_77 { min-width: 0; } ._plansPricingPageTitle_11g21_85 { margin: 0 0 var(--space-1); color: var(--text-primary-dark); font-size: var(--font-size-2xl); font-weight: var(--font-weight-bold); line-height: 1.25; } ._plansPricingPageSubtitle_11g21_105 { margin: 0; color: var(--text-secondary); font-size: var(--font-size-base); line-height: 1.5; } ._plansHeaderActions_11g21_123 { display: flex; align-items: center; gap: var(--space-2); flex-shrink: 0; } /* ============================================================ SUMMARY GRID ============================================================ */ ._plansSummaryGrid_11g21_149 { display: grid; grid-template-columns: repeat(5, minmax(0, 1fr)); gap: 18px; } /* ============================================================ SUMMARY CARD ============================================================ */ ._plansSummaryCard_11g21_169 { position: relative; min-height: 142px; padding: 19px 20px 17px; box-sizing: border-box; background: #ffffff; border: 1px solid #e7ebf2; border-radius: 11px; box-shadow: 0 2px 5px rgba(24, 39, 75, 0.025), 0 8px 20px rgba(24, 39, 75, 0.035); overflow: hidden; } ._plansSummaryCard_11g21_169::before { content: ""; position: absolute; top: -1px; left: 0; right: 0; height: 3px; border-radius: 10px 10px 0 0; } /* ============================================================ SUMMARY TOP BORDERS ============================================================ */ ._totalCard_11g21_229::before { background: #1769ff; } ._activeCard_11g21_237::before { background: #13b879; } ._inactiveCard_11g21_245::before { background: #ff3d3d; } ._customSummaryCard_11g21_253::before { background: #7c3aed; } ._mrrCard_11g21_261::before { background: #1769ff; } /* ============================================================ SUMMARY CONTENT ============================================================ */ ._summaryCardTop_11g21_277 { display: flex; align-items: center; justify-content: space-between; gap: 10px; } ._summaryCardLabel_11g21_291 { color: #697791; font-size: 11px; line-height: 1.35; font-weight: 600; letter-spacing: 0.2px; } ._summaryCardIcon_11g21_307 { width: 34px; height: 34px; display: flex; align-items: center; justify-content: center; flex-shrink: 0; border-radius: 50%; } /* ============================================================ SUMMARY ICON COLORS ============================================================ */ ._totalIcon_11g21_339 { color: #1769ff; background: #eaf2ff; } ._activeIcon_11g21_349 { color: #10a86f; background: #e4f8ef; } ._inactiveIcon_11g21_359 { color: #f0353a; background: #ffe8e8; } ._customSummaryIcon_11g21_369 { color: #7c3aed; background: #f0e8ff; } ._mrrIcon_11g21_379 { color: #1769ff; background: #eaf2ff; } /* ============================================================ SUMMARY VALUES ============================================================ */ ._summaryCardValue_11g21_397 { margin-top: 20px; color: #14213d; font-size: 24px; line-height: 1; font-weight: 700; letter-spacing: -0.5px; } ._mrrValue_11g21_417 { font-size: 20px; letter-spacing: -0.3px; white-space: nowrap; } ._summaryCardDescription_11g21_429 { margin-top: 13px; color: #8a96aa; font-size: 11px; line-height: 1.4; } /* ============================================================ TABLE CARD ============================================================ */ ._plansTableCard_11g21_453 { width: 100%; background: #ffffff; border: 1px solid #e5eaf1; border-radius: 12px; box-shadow: 0 2px 5px rgba(24, 39, 75, 0.025), 0 8px 22px rgba(24, 39, 75, 0.035); overflow: visible; } /* ============================================================ TOOLBAR ============================================================ */ ._plansToolbarActions_11g21_491 { display: flex; align-items: center; gap: 10px; margin-left: 2px; } /* ============================================================ EXPORT BUTTON ============================================================ */ ._plansExportBtn_11g21_513, ._plansCreateBtn_11g21_515 { height: 36px; display: inline-flex; align-items: center; justify-content: center; gap: 7px; padding: 0 14px; border-radius: 7px; font-family: inherit; font-size: 12px; font-weight: 600; cursor: pointer; transition: background 0.15s ease, border-color 0.15s ease, box-shadow 0.15s ease, transform 0.15s ease; } ._plansExportBtn_11g21_513 { color: #1d2c49; background: #ffffff; border: 1px solid #e0e6ef; } ._plansExportBtn_11g21_513:hover { background: #f8fafc; border-color: #cfd7e4; } /* ============================================================ CREATE BUTTON ============================================================ */ ._plansCreateBtn_11g21_515 { color: #ffffff; background: #1769ff; border: 1px solid #1769ff; padding-left: 15px; padding-right: 16px; box-shadow: 0 3px 8px rgba(23, 105, 255, 0.18); } ._plansCreateBtn_11g21_515:hover { background: #0f5ce6; border-color: #0f5ce6; box-shadow: 0 5px 12px rgba(23, 105, 255, 0.22); } ._plansCreateBtn_11g21_515:active { transform: translateY(1px); } /* ============================================================ PLAN CELL ============================================================ */ ._planCell_11g21_647 { display: flex; align-items: center; gap: 12px; min-width: 0; } /* ============================================================ PLAN ICON ============================================================ */ ._planIcon_11g21_671 { width: 40px; height: 40px; display: inline-flex; align-items: center; justify-content: center; flex-shrink: 0; border-radius: 10px; } ._allCampaignsIcon_11g21_697 { color: #1769ff; background: #eaf2ff; } ._customIcon_11g21_707 { color: #f39a00; background: #fff2dd; } ._starterIcon_11g21_717 { color: #12b879; background: #e3f8ee; } ._enterpriseIcon_11g21_727 { color: #7c3aed; background: #f0e8ff; } ._professionalIcon_11g21_737 { color: #1769ff; background: #eaf2ff; } ._businessIcon_11g21_747 { color: #7c3aed; background: #f0e8ff; } /* ============================================================ PLAN INFO ============================================================ */ ._planInfo_11g21_765 { display: flex; flex-direction: column; min-width: 0; gap: 5px; width: 100%; } ._planName_11g21_785 { color: #1d2d4b; font-size: 12px; line-height: 1.2; font-weight: 600; white-space: nowrap; } ._planDescription_11g21_805 { width: 100%; max-width: 320px; color: #7c899f; font-size: 10px; line-height: 1.45; font-weight: 400; white-space: normal; overflow: visible; text-overflow: clip; overflow-wrap: anywhere; word-break: break-word; } /* ============================================================ TYPE BADGE ============================================================ */ ._typeBadge_11g21_847 { display: inline-flex; align-items: center; min-height: 22px; padding: 0 8px; border-radius: 6px; font-size: 10px; line-height: 1; font-weight: 600; white-space: nowrap; } ._typeMonthly_11g21_883 { color: #1769ff; background: #edf4ff; } ._typeYearly_11g21_893 { color: #7040df; background: #f1ebff; } ._typeCustom_11g21_903 { color: #e99a00; background: #fff3df; } /* ============================================================ BASE PRICE ============================================================ */ ._basePrice_11g21_921 { color: #34435e; font-size: 11px; line-height: 1.4; font-weight: 500; white-space: nowrap; } ._customPricing_11g21_943 { color: #34435e; font-size: 11px; line-height: 1.4; font-weight: 500; white-space: nowrap; } /* ============================================================ BILLING ============================================================ */ ._billingValue_11g21_973 { color: #34435e; font-size: 11px; line-height: 1.4; font-weight: 500; white-space: nowrap; } /* ============================================================ CURRENCY / SETUP FEE ============================================================ */ ._currencyValue_11g21_1003, ._setupFeeValue_11g21_1005 { color: #34435e; font-size: 11px; line-height: 1.4; font-weight: 500; white-space: nowrap; } ._currencyValue_11g21_1003 { display: inline-flex; align-items: center; justify-content: center; min-width: 38px; padding: 4px 7px; border-radius: 6px; color: #1769ff; background: #edf4ff; font-size: 10px; font-weight: 600; } /* ============================================================ ACTIVE CUSTOMERS ============================================================ */ ._customerValue_11g21_1069 { color: #34435e; font-size: 11px; line-height: 1.4; font-weight: 500; white-space: nowrap; } /* ============================================================ PLAN STATUS ============================================================ */ ._planStatus_11g21_1099 { display: inline-flex; align-items: center; justify-content: center; min-width: 52px; height: 23px; padding: 0 8px; box-sizing: border-box; border-radius: 6px; font-size: 10px; line-height: 1; font-weight: 600; white-space: nowrap; } ._isActive_11g21_1143 { color: #109b67; background: #e2f7ed; } ._isInactive_11g21_1153 { color: #e13d43; background: #ffe5e7; } /* ============================================================ UPDATED AT ============================================================ */ ._updatedAt_11g21_1171 { display: flex; flex-direction: column; gap: 3px; color: #34435e; font-size: 10px; line-height: 1.35; font-weight: 500; white-space: nowrap; } /* ============================================================ RESPONSIVE ============================================================ */ @media (max-width: 1400px) { ._plansSummaryGrid_11g21_149 { gap: 13px; } ._plansSummaryCard_11g21_169 { padding-left: 16px; padding-right: 16px; } ._summaryCardLabel_11g21_291 { font-size: 10px; } ._mrrValue_11g21_417 { font-size: 18px; } ._planDescription_11g21_805 { max-width: 280px; } } /* ============================================================ TABLET / MEDIUM ============================================================ */ @media (max-width: 1150px) { ._plansSummaryGrid_11g21_149 { grid-template-columns: repeat(3, minmax(0, 1fr)); } } /* ============================================================ MOBILE ============================================================ */ @media (max-width: 800px) { ._plansPricingPage_11g21_9 { padding: var(--space-3); } ._plansPricingPageHeader_11g21_61 { align-items: flex-start; flex-direction: column; } ._plansHeaderActions_11g21_123 { width: 100%; flex-wrap: wrap; } ._plansSummaryGrid_11g21_149 { grid-template-columns: repeat(2, minmax(0, 1fr)); } ._planDescription_11g21_805 { max-width: 240px; } } /* ============================================================ SMALL MOBILE ============================================================ */ @media (max-width: 520px) { ._plansPricingPage_11g21_9 { padding: var(--space-3); } ._plansSummaryGrid_11g21_149 { grid-template-columns: 1fr; } ._plansHeaderActions_11g21_123 { display: grid; grid-template-columns: 1fr 1fr; } ._plansHeaderActions_11g21_123 .app-btn { width: 100%; } ._plansPricingPageTitle_11g21_85 { font-size: var(--font-size-xl); } ._plansSummaryCard_11g21_169 { min-height: 135px; } } /* ============================================================ PLANS PRICING FORM PAGE Dashboard spacing + global theme ============================================================ */ ._plansPricingFormPage_9o74j_11 { width: 100%; min-width: 0; min-height: 100%; padding: var(--space-4) var(--space-5) var(--space-5); box-sizing: border-box; background: var(--color-bg-light); color: var(--text-primary-dark); font-family: var(--font-family-base); font-size: var(--font-size-base); } ._plansPricingFormPage_9o74j_11 form { width: 100%; min-width: 0; display: flex; flex-direction: column; gap: var(--space-3); } /* ============================================================ BREADCRUMB ============================================================ */ ._breadcrumb_9o74j_71 { display: flex; align-items: center; flex-wrap: wrap; gap: var(--space-2); margin: 0; color: var(--text-secondary); font-size: var(--font-size-xs); line-height: 1.4; } ._breadcrumbPrimary_9o74j_101 { color: var(--color-primary); font-weight: var(--font-weight-semibold); } ._breadcrumbSlash_9o74j_111 { color: var(--text-muted); } ._breadcrumbCurrent_9o74j_119 { color: var(--text-secondary); font-weight: var(--font-weight-medium); } /* ============================================================ PAGE HEADER ============================================================ */ ._pageHeader_9o74j_137 { display: flex; align-items: center; justify-content: space-between; gap: var(--space-4); margin: 0; } ._pageHeader_9o74j_137 > div:first-child { min-width: 0; } ._pageTitle_9o74j_165 { margin: 0 0 var(--space-1); color: var(--text-primary-dark); font-size: var(--font-size-2xl); line-height: 1.25; font-weight: var(--font-weight-bold); } ._pageSubtitle_9o74j_185 { margin: 0; color: var(--text-secondary); font-size: var(--font-size-base); line-height: 1.5; } ._headerActions_9o74j_203 { display: flex; align-items: center; justify-content: flex-end; flex-wrap: wrap; gap: var(--space-2); flex-shrink: 0; } /* ============================================================ TOP GRID ============================================================ */ ._topGrid_9o74j_233 { display: grid; grid-template-columns: minmax(0, 1.45fr) minmax(340px, 0.95fr); gap: var(--space-3); margin: 0; } /* ============================================================ COMMON FORM CARD ============================================================ */ ._formCard_9o74j_265, ._fullWidthCard_9o74j_267 { min-width: 0; box-sizing: border-box; background: var(--color-white); border: 1px solid var(--border-light); border-radius: var(--radius-lg); box-shadow: var(--shadow-sm); } ._formCard_9o74j_265 { padding: var(--space-4); } ._fullWidthCard_9o74j_267 { width: 100%; padding: var(--space-4); margin: 0; } /* ============================================================ SECTION HEADER ============================================================ */ ._sectionHeader_9o74j_325 { display: flex; align-items: center; gap: var(--space-2); margin-bottom: var(--space-3); } ._sectionHeader_9o74j_325 h2 { margin: 0; color: var(--text-primary-dark); font-size: var(--font-size-sm); line-height: 1.3; font-weight: var(--font-weight-bold); } ._sectionIcon_9o74j_363 { width: 28px; height: 28px; display: inline-flex; align-items: center; justify-content: center; flex-shrink: 0; border-radius: var(--radius-sm); color: var(--color-primary); background: var(--brand-soft); } /* ============================================================ FORM GRID ============================================================ */ ._formGridThree_9o74j_403 { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: var(--space-3); } ._formGridTwo_9o74j_417 { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: var(--space-3); } /* ============================================================ FIELD GROUP ============================================================ */ ._fieldGroup_9o74j_439 { min-width: 0; } ._fieldGroup_9o74j_439 label, ._notesField_9o74j_449 label { display: block; margin-bottom: var(--space-1); color: var(--text-secondary); font-size: var(--font-size-xs); line-height: 1.35; font-weight: var(--font-weight-semibold); } ._fieldGroup_9o74j_439 label span { margin-left: 2px; color: var(--color-danger); } /* ============================================================ INPUTS ============================================================ */ ._fieldGroup_9o74j_439 input, ._fieldGroup_9o74j_439 select, ._notesField_9o74j_449 textarea { width: 100%; box-sizing: border-box; border: 1px solid var(--border-light); border-radius: var(--radius-sm); outline: none; background: var(--color-white); color: var(--text-primary-dark); font-family: inherit; font-size: var(--font-size-sm); transition: border-color 0.15s ease, box-shadow 0.15s ease; } ._fieldGroup_9o74j_439 input, ._fieldGroup_9o74j_439 select { min-height: 36px; padding: 0 var(--space-2); } ._fieldGroup_9o74j_439 input::placeholder, ._notesField_9o74j_449 textarea::placeholder { color: var(--text-muted); } ._fieldGroup_9o74j_439 input:focus, ._fieldGroup_9o74j_439 select:focus, ._notesField_9o74j_449 textarea:focus { border-color: var(--color-primary); box-shadow: 0 0 0 3px color-mix(in srgb, var(--color-primary) 10%, transparent); } /* ============================================================ SELECT ============================================================ */ ._selectWrapper_9o74j_589 { position: relative; } ._selectWrapper_9o74j_589 select { padding-right: 34px; appearance: none; -webkit-appearance: none; cursor: pointer; } ._selectWrapper_9o74j_589 svg { position: absolute; top: 50%; right: var(--space-2); width: 14px; height: 14px; color: var(--text-secondary); pointer-events: none; transform: translateY(-50%); } /* ============================================================ NUMBER CONTROL ============================================================ */ ._numberControl_9o74j_655 { min-height: 36px; display: grid; grid-template-columns: 38px 1fr 38px; overflow: hidden; border: 1px solid var(--border-light); border-radius: var(--radius-sm); background: var(--color-white); } ._numberControl_9o74j_655 button { display: flex; align-items: center; justify-content: center; border: 0; background: var(--color-white); color: var(--text-secondary); font-family: inherit; font-size: var(--font-size-lg); cursor: pointer; } ._numberControl_9o74j_655 button:hover { background: var(--color-gray-light); } ._numberControl_9o74j_655 span { display: flex; align-items: center; justify-content: center; border-left: 1px solid var(--border-light); border-right: 1px solid var(--border-light); color: var(--text-primary-dark); font-size: var(--font-size-sm); font-weight: var(--font-weight-semibold); } /* ============================================================ DISCOUNT SUFFIX ============================================================ */ ._inputSuffix_9o74j_759 { position: relative; } ._inputSuffix_9o74j_759 input { padding-right: 30px; } ._inputSuffix_9o74j_759 span { position: absolute; top: 50%; right: var(--space-2); color: var(--text-muted); font-size: var(--font-size-sm); transform: translateY(-50%); } /* ============================================================ OVERRIDE ROW ============================================================ */ ._overrideRow_9o74j_809 { display: flex; align-items: center; justify-content: space-between; gap: var(--space-3); margin-top: var(--space-4); } ._overrideRow_9o74j_809 > div { display: flex; align-items: center; gap: var(--space-1); } ._overrideLabel_9o74j_843 { color: var(--text-primary-dark); font-size: var(--font-size-sm); font-weight: var(--font-weight-semibold); } ._infoIcon_9o74j_857 { color: var(--text-muted); } /* ============================================================ TOGGLE ============================================================ */ ._toggle_9o74j_873, ._smallToggle_9o74j_875, ._featureToggle_9o74j_877 { position: relative; flex-shrink: 0; padding: 0; border: 0; background: var(--border-medium); cursor: pointer; transition: background 0.15s ease; } ._toggle_9o74j_873 { width: 34px; height: 20px; border-radius: var(--radius-full); } ._toggle_9o74j_873 span, ._smallToggle_9o74j_875 span, ._featureToggle_9o74j_877 span { position: absolute; top: 50%; left: 2px; display: block; border-radius: var(--radius-full); background: var(--color-white); box-shadow: var(--shadow-sm); transform: translateY(-50%); transition: left 0.15s ease; } ._toggle_9o74j_873 span { width: 16px; height: 16px; } ._toggleOn_9o74j_975 { background: var(--color-primary) !important; } ._toggle_9o74j_873._toggleOn_9o74j_975 span { left: calc(100% - 18px); } /* ============================================================ RESOURCE GRID ============================================================ */ ._resourceGrid_9o74j_999 { display: grid; grid-template-columns: repeat(7, minmax(0, 1fr)); gap: var(--space-2); } /* ============================================================ RESOURCE CARD ============================================================ */ ._resourceCard_9o74j_1021 { min-width: 0; padding: var(--space-3); box-sizing: border-box; border: 1px solid var(--border-light); border-radius: var(--radius-md); background: var(--color-white); } /* ============================================================ RESOURCE HEADER ============================================================ */ ._resourceHeader_9o74j_1055 { min-width: 0; min-height: 24px; display: flex; align-items: center; gap: var(--space-2); margin-bottom: var(--space-2); color: var(--text-primary-dark); font-size: var(--font-size-xs); font-weight: var(--font-weight-bold); } ._resourceHeader_9o74j_1055 > span:last-child { min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; } ._resourceIcon_9o74j_1107 { width: 22px; height: 22px; display: inline-flex; align-items: center; justify-content: center; flex-shrink: 0; border-radius: var(--radius-sm); font-size: var(--font-size-sm); } ._emailIcon_9o74j_1137 { color: var(--color-primary); background: var(--brand-soft); } ._smsIcon_9o74j_1147 { color: var(--color-warning); background: color-mix(in srgb, var(--color-warning) 13%, var(--color-white)); } ._whatsappIcon_9o74j_1159 { color: var(--color-success); background: color-mix(in srgb, var(--color-success) 12%, var(--color-white)); } ._voiceIcon_9o74j_1171 { color: #8b4de8; background: #f1eaff; } ._contactsIcon_9o74j_1181, ._usersIcon_9o74j_1183 { color: var(--color-primary); background: var(--brand-soft); } ._socialIcon_9o74j_1193 { color: var(--color-danger); background: color-mix(in srgb, var(--color-danger) 11%, var(--color-white)); } /* ============================================================ RESOURCE FIELDS ============================================================ */ ._resourceField_9o74j_1213 { margin-bottom: var(--space-2); } ._resourceField_9o74j_1213 label { display: block; margin-bottom: 4px; color: var(--text-secondary); font-size: 11px; line-height: 1.25; font-weight: var(--font-weight-medium); } ._resourceField_9o74j_1213 input { width: 100%; min-height: 32px; box-sizing: border-box; padding: 0 var(--space-2); border: 1px solid var(--border-light); border-radius: var(--radius-sm); outline: none; background: var(--color-white); color: var(--text-primary-dark); font-family: inherit; font-size: var(--font-size-xs); } ._resourceField_9o74j_1213 input:focus { border-color: var(--color-primary); box-shadow: 0 0 0 2px color-mix(in srgb, var(--color-primary) 8%, transparent); } /* ============================================================ OVERAGE ============================================================ */ ._overageRow_9o74j_1305 { display: flex; align-items: center; justify-content: space-between; gap: var(--space-2); margin-top: var(--space-2); } ._overageRow_9o74j_1305 > span:first-child { color: var(--text-secondary); font-size: 11px; font-weight: var(--font-weight-medium); white-space: nowrap; } ._smallToggle_9o74j_875 { width: 28px; height: 16px; border-radius: var(--radius-full); } ._smallToggle_9o74j_875 span { width: 12px; height: 12px; } ._smallToggle_9o74j_875._toggleOn_9o74j_975 span { left: calc(100% - 14px); } /* ============================================================ FEATURE GRID ============================================================ */ ._featureGrid_9o74j_1383 { display: grid; grid-template-columns: repeat(5, minmax(0, 1fr)); gap: var(--space-2) var(--space-3); } /* ============================================================ FEATURE ITEM ============================================================ */ ._featureItem_9o74j_1405 { min-width: 0; min-height: 36px; display: flex; align-items: center; gap: var(--space-2); padding: var(--space-1) var(--space-2); border: 1px solid var(--border-light); border-radius: var(--radius-sm); background: var(--color-white); } ._featureIcon_9o74j_1439 { display: inline-flex; align-items: center; justify-content: center; flex-shrink: 0; color: var(--color-primary); font-size: var(--font-size-sm); } ._featureLabel_9o74j_1463 { min-width: 0; overflow: hidden; color: var(--text-secondary); font-size: var(--font-size-xs); font-weight: var(--font-weight-medium); text-overflow: ellipsis; white-space: nowrap; } ._featureToggle_9o74j_877 { width: 28px; height: 16px; margin-left: auto; border-radius: var(--radius-full); } ._featureToggle_9o74j_877 span { width: 12px; height: 12px; } ._featureToggle_9o74j_877._toggleOn_9o74j_975 span { left: calc(100% - 14px); } /* ============================================================ NOTES ============================================================ */ ._notesField_9o74j_449 { position: relative; } ._notesField_9o74j_449 textarea { min-height: 90px; padding: var(--space-2) var(--space-3); resize: vertical; line-height: 1.5; } ._characterCount_9o74j_1563 { position: absolute; right: var(--space-2); bottom: var(--space-2); color: var(--text-muted); font-size: var(--font-size-xs); } /* ============================================================ RESPONSIVE - LARGE DESKTOP ============================================================ */ @media (max-width: 1500px) { ._resourceGrid_9o74j_999 { grid-template-columns: repeat(4, minmax(0, 1fr)); } ._featureGrid_9o74j_1383 { grid-template-columns: repeat(5, minmax(0, 1fr)); } } /* ============================================================ RESPONSIVE - LAPTOP ============================================================ */ @media (max-width: 1200px) { ._topGrid_9o74j_233 { grid-template-columns: 1fr; } ._resourceGrid_9o74j_999 { grid-template-columns: repeat(3, minmax(0, 1fr)); } ._featureGrid_9o74j_1383 { grid-template-columns: repeat(3, minmax(0, 1fr)); } } /* ============================================================ RESPONSIVE - TABLET ============================================================ */ @media (max-width: 900px) { ._pageHeader_9o74j_137 { align-items: flex-start; flex-direction: column; } ._headerActions_9o74j_203 { width: 100%; justify-content: flex-start; } ._formGridThree_9o74j_403, ._formGridTwo_9o74j_417 { grid-template-columns: repeat(2, minmax(0, 1fr)); } ._resourceGrid_9o74j_999 { grid-template-columns: repeat(2, minmax(0, 1fr)); } ._featureGrid_9o74j_1383 { grid-template-columns: repeat(2, minmax(0, 1fr)); } } /* ============================================================ RESPONSIVE - MOBILE ============================================================ */ @media (max-width: 768px) { ._plansPricingFormPage_9o74j_11 { padding: var(--space-3); } ._headerActions_9o74j_203 { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); } ._headerActions_9o74j_203 .app-btn { width: 100%; } ._formCard_9o74j_265, ._fullWidthCard_9o74j_267 { padding: var(--space-3); } } /* ============================================================ RESPONSIVE - SMALL MOBILE ============================================================ */ @media (max-width: 520px) { ._pageTitle_9o74j_165 { font-size: var(--font-size-xl); } ._pageSubtitle_9o74j_185 { font-size: var(--font-size-sm); } ._headerActions_9o74j_203 { grid-template-columns: 1fr; } ._formGridThree_9o74j_403, ._formGridTwo_9o74j_417, ._resourceGrid_9o74j_999, ._featureGrid_9o74j_1383 { grid-template-columns: 1fr; } ._overrideRow_9o74j_809 { align-items: flex-start; } } /* ============================================================ FORMIK / YUP VALIDATION ============================================================ */ ._fieldError_9o74j_1823 { margin-top: var(--space-1); color: var(--color-danger); font-size: var(--font-size-xs); line-height: 1.35; font-weight: var(--font-weight-medium); } ._fieldGroup_9o74j_439 input[aria-invalid="true"], ._fieldGroup_9o74j_439 select[aria-invalid="true"], ._resourceField_9o74j_1213 input[aria-invalid="true"], ._notesField_9o74j_449 textarea[aria-invalid="true"] { border-color: var(--color-danger); } /* ============================================================ PLANS PRICING VIEW PAGE Dashboard spacing + theme typography ============================================================ */ ._planViewPage_1q74q_11 { width: 100%; min-width: 0; min-height: 100%; display: flex; flex-direction: column; gap: var(--space-3); padding: var(--space-4) var(--space-5) var(--space-5); box-sizing: border-box; background: var(--color-bg-light); color: var(--text-primary-dark); font-family: var(--font-family-base); font-size: var(--font-size-base); } /* ============================================================ BREADCRUMB ============================================================ */ ._breadcrumb_1q74q_61 { display: flex; align-items: center; flex-wrap: wrap; gap: var(--space-2); margin: 0; color: var(--text-secondary); font-size: var(--font-size-xs); line-height: 1.4; } ._breadcrumbLink_1q74q_91 { padding: 0; border: 0; background: transparent; color: var(--color-primary); font-family: inherit; font-size: inherit; font-weight: var(--font-weight-semibold); cursor: pointer; } ._breadcrumbLink_1q74q_91:hover { text-decoration: underline; } ._breadcrumbSeparator_1q74q_131 { color: var(--text-muted); } ._breadcrumbCurrent_1q74q_139 { color: var(--text-secondary); font-weight: var(--font-weight-medium); } /* ============================================================ PAGE HEADER ============================================================ */ ._pageHeader_1q74q_157 { display: flex; align-items: center; justify-content: space-between; gap: var(--space-4); margin: 0; } ._headerLeft_1q74q_177 { min-width: 0; } ._pageTitle_1q74q_185 { margin: 0 0 var(--space-1); color: var(--text-primary-dark); font-size: var(--font-size-2xl); font-weight: var(--font-weight-bold); line-height: 1.25; } ._pageSubtitle_1q74q_205 { margin: 0; color: var(--text-secondary); font-size: var(--font-size-base); line-height: 1.5; } ._headerActions_1q74q_223 { display: flex; align-items: center; justify-content: flex-end; gap: var(--space-2); flex-shrink: 0; flex-wrap: wrap; } /* ============================================================ HEADER BUTTON - DANGER VARIANT ============================================================ */ ._archiveButton_1q74q_255 { color: var(--color-danger) !important; border-color: color-mix( in srgb, var(--color-danger) 32%, var(--border-light) ) !important; } ._archiveButton_1q74q_255:hover { background: color-mix( in srgb, var(--color-danger) 7%, var(--color-white) ) !important; border-color: color-mix( in srgb, var(--color-danger) 48%, var(--border-light) ) !important; } /* ============================================================ SUMMARY GRID ============================================================ */ ._summaryGrid_1q74q_311 { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: var(--space-3); margin: 0; } /* ============================================================ SUMMARY CARD ============================================================ */ ._summaryCard_1q74q_337 { position: relative; min-width: 0; min-height: 88px; display: flex; align-items: center; gap: var(--space-3); padding: var(--space-3) var(--space-4); box-sizing: border-box; background: var(--color-white); border: 1px solid var(--border-light); border-radius: var(--radius-lg); box-shadow: var(--shadow-sm); overflow: hidden; } ._summaryCard_1q74q_337::before { content: ""; position: absolute; top: 0; left: 0; right: 0; height: 3px; } ._blueCard_1q74q_411::before { background: var(--color-primary); } ._greenCard_1q74q_419::before { background: var(--color-success); } ._purpleCard_1q74q_427::before { background: #8b4cff; } /* ============================================================ SUMMARY ICON ============================================================ */ ._summaryIcon_1q74q_443 { width: 42px; height: 42px; flex: 0 0 42px; display: flex; align-items: center; justify-content: center; border-radius: var(--radius-full); color: var(--color-primary); background: var(--brand-soft); } ._greenIcon_1q74q_477 { color: var(--color-success); background: color-mix(in srgb, var(--color-success) 12%, var(--color-white)); } ._purpleIcon_1q74q_489 { color: #8b4cff; background: #f2eaff; } /* ============================================================ SUMMARY CONTENT ============================================================ */ ._summaryContent_1q74q_507 { min-width: 0; display: flex; flex-direction: column; gap: 3px; } ._summaryLabel_1q74q_525 { color: var(--text-secondary); font-size: var(--font-size-xs); line-height: 1.2; font-weight: var(--font-weight-bold); letter-spacing: 0.25px; } ._summaryValue_1q74q_545 { color: var(--text-primary-dark); font-size: var(--font-size-lg); line-height: 1.25; font-weight: var(--font-weight-bold); } ._priceSuffix_1q74q_561 { color: var(--text-secondary); font-size: var(--font-size-xs); font-weight: var(--font-weight-medium); } ._activeText_1q74q_575 { color: var(--color-success); } ._summaryDescription_1q74q_583 { color: var(--text-secondary); font-size: var(--font-size-xs); line-height: 1.35; } /* ============================================================ TABS ============================================================ */ ._tabsCard_1q74q_605 { min-height: 42px; display: flex; align-items: stretch; gap: 0; padding: 0 var(--space-2); box-sizing: border-box; background: var(--color-white); border: 1px solid var(--border-light); border-radius: var(--radius-lg); box-shadow: var(--shadow-sm); overflow-x: auto; } ._tabButton_1q74q_649 { position: relative; min-width: 82px; padding: 0 var(--space-3); flex-shrink: 0; border: 0; background: transparent; color: var(--text-secondary); font-family: inherit; font-size: var(--font-size-xs); font-weight: var(--font-weight-medium); cursor: pointer; } ._tabButton_1q74q_649:hover { color: var(--color-primary); } ._activeTab_1q74q_701 { color: var(--color-primary); font-weight: var(--font-weight-semibold); } ._activeTab_1q74q_701::after { content: ""; position: absolute; left: var(--space-2); right: var(--space-2); bottom: 0; height: 2px; border-radius: 2px 2px 0 0; background: var(--color-primary); } /* ============================================================ OVERVIEW GRID ============================================================ */ ._overviewGrid_1q74q_751 { display: grid; grid-template-columns: minmax(250px, 1fr) minmax(240px, 0.95fr) minmax(340px, 1.35fr) minmax(310px, 1.08fr); align-items: stretch; gap: var(--space-3); padding: 0; } /* ============================================================ SECTION CARD ============================================================ */ ._sectionCard_1q74q_791 { min-width: 0; align-self: stretch; height: 100%; background: var(--color-white); border: 1px solid var(--border-light); border-radius: var(--radius-lg); box-shadow: var(--shadow-sm); overflow: hidden; } ._profileCard_1q74q_823, ._pricingCard_1q74q_825, ._resourceCard_1q74q_827, ._subscriberSummaryCard_1q74q_829 { width: 100%; } ._sectionHeader_1q74q_837 { min-height: 44px; display: flex; align-items: center; justify-content: space-between; gap: var(--space-2); padding: 0 var(--space-3); box-sizing: border-box; border-bottom: 1px solid var(--border-light); } ._sectionTitleWrapper_1q74q_869 { min-width: 0; display: flex; align-items: center; gap: var(--space-2); } ._sectionTitleWrapper_1q74q_869 h2 { margin: 0; color: var(--text-primary-dark); font-size: var(--font-size-sm); line-height: 1.3; font-weight: var(--font-weight-bold); } ._sectionIcon_1q74q_907 { width: 26px; height: 26px; flex: 0 0 26px; display: flex; align-items: center; justify-content: center; border-radius: var(--radius-sm); } ._blueSectionIcon_1q74q_933 { color: var(--color-primary); background: var(--brand-soft); } ._greenSectionIcon_1q74q_945 { color: var(--color-success); background: color-mix(in srgb, var(--color-success) 12%, var(--color-white)); } ._purpleSectionIcon_1q74q_957 { color: #8148eb; background: #f2ebff; } ._orangeSectionIcon_1q74q_967 { color: var(--color-warning); background: color-mix(in srgb, var(--color-warning) 14%, var(--color-white)); } /* ============================================================ DETAIL LIST ============================================================ */ ._detailList_1q74q_987 { padding: var(--space-3); } ._detailRow_1q74q_995 { min-height: 30px; display: flex; align-items: center; justify-content: space-between; gap: var(--space-4); } ._detailRow_1q74q_995 > span { flex: 0 1 48%; min-width: 0; color: var(--text-secondary); font-size: var(--font-size-xs); line-height: 1.35; font-weight: var(--font-weight-medium); } ._detailRow_1q74q_995 > strong { min-width: 0; max-width: 58%; margin-left: auto; display: flex; align-items: center; justify-content: flex-end; flex-wrap: wrap; gap: var(--space-1); color: var(--text-primary-dark); font-size: var(--font-size-xs); line-height: 1.4; font-weight: var(--font-weight-semibold); text-align: right; overflow-wrap: anywhere; } ._descriptionRow_1q74q_1087 { padding-top: var(--space-2); } ._descriptionRow_1q74q_1087 > span { display: block; margin-bottom: var(--space-1); color: var(--text-secondary); font-size: var(--font-size-xs); font-weight: var(--font-weight-medium); } ._descriptionRow_1q74q_1087 p { margin: 0; color: var(--text-secondary); font-size: var(--font-size-xs); line-height: 1.55; overflow-wrap: anywhere; } /* ============================================================ TYPE BADGE ============================================================ */ ._typeBadge_1q74q_1147 { display: inline-flex; align-items: center; min-height: 22px; padding: 0 var(--space-2); box-sizing: border-box; border-radius: var(--radius-sm); color: var(--color-primary); background: var(--brand-soft); font-size: var(--font-size-xs); font-weight: var(--font-weight-semibold); } /* ============================================================ SAVE BADGE ============================================================ */ ._saveBadge_1q74q_1195 { display: inline-flex; align-items: center; margin-left: 0; min-height: 20px; padding: 0 6px; border-radius: var(--radius-sm); color: var(--color-success); background: color-mix(in srgb, var(--color-success) 12%, var(--color-white)); font-size: 11px; font-weight: var(--font-weight-bold); white-space: nowrap; } /* ============================================================ ALLOWED BADGE ============================================================ */ ._allowedBadge_1q74q_1247 { display: inline-flex; align-items: center; gap: var(--space-1); min-height: 22px; padding: 0 var(--space-2); border-radius: var(--radius-sm); color: var(--color-success); background: color-mix(in srgb, var(--color-success) 12%, var(--color-white)); font-size: var(--font-size-xs); font-weight: var(--font-weight-semibold); white-space: nowrap; } /* ============================================================ RESOURCE TABLE ============================================================ */ ._resourceTable_1q74q_1299 { width: 100%; } ._resourceTableHeader_1q74q_1307, ._resourceTableRow_1q74q_1309 { display: grid; grid-template-columns: minmax(145px, 1.35fr) minmax(75px, 0.65fr) minmax(125px, 1fr); align-items: center; column-gap: var(--space-2); padding: 0 var(--space-3); box-sizing: border-box; } ._resourceTableHeader_1q74q_1307 { min-height: 34px; color: var(--text-secondary); background: var(--color-gray-light); font-size: var(--font-size-xs); font-weight: var(--font-weight-semibold); } ._resourceTableRow_1q74q_1309 { min-height: 33px; border-top: 1px solid var(--border-light); color: var(--text-secondary); font-size: var(--font-size-xs); } ._resourceTableRow_1q74q_1309 > strong { color: var(--text-primary-dark); font-size: var(--font-size-xs); } ._resourceTableRow_1q74q_1309 > span:last-child { text-align: right; white-space: nowrap; } ._resourceTableHeader_1q74q_1307 > span:nth-child(2), ._resourceTableHeader_1q74q_1307 > span:nth-child(3) { text-align: right; } ._resourceTableRow_1q74q_1309 > strong { justify-self: end; text-align: right; white-space: nowrap; } ._resourceTableRow_1q74q_1309 > span:last-child { justify-self: end; text-align: right; white-space: nowrap; } ._resourceName_1q74q_1451 { min-width: 0; display: flex; align-items: center; gap: var(--space-2); } ._resourceIcon_1q74q_1469 { width: 20px; height: 20px; flex: 0 0 20px; display: inline-flex; align-items: center; justify-content: center; border-radius: 5px; color: var(--color-primary); background: var(--brand-soft); } ._resourceName_1q74q_1451 > span:last-child { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; } /* ============================================================ SUBSCRIBER SUMMARY ============================================================ */ ._subscriberSummary_1q74q_829 { padding: var(--space-3); } ._summaryDetailRow_1q74q_1535 { min-height: 28px; display: flex; align-items: center; justify-content: space-between; gap: var(--space-2); } ._summaryDetailRow_1q74q_1535 span { color: var(--text-secondary); font-size: var(--font-size-xs); } ._summaryDetailRow_1q74q_1535 strong { min-width: 0; margin-left: auto; color: var(--text-primary-dark); font-size: var(--font-size-xs); font-weight: var(--font-weight-semibold); text-align: right; overflow-wrap: anywhere; } ._revenueText_1q74q_1597 { color: var(--color-primary) !important; } /* ============================================================ USAGE ROW ============================================================ */ ._usageRow_1q74q_1613 { min-height: 28px; display: grid; grid-template-columns: minmax(100px, 112px) minmax(70px, 1fr) 34px; align-items: center; gap: var(--space-2); } ._usageRow_1q74q_1613 > span { color: var(--text-secondary); font-size: var(--font-size-xs); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; } ._usageRow_1q74q_1613 > strong { color: var(--text-secondary); font-size: var(--font-size-xs); text-align: right; white-space: nowrap; } ._progressTrack_1q74q_1685 { width: 100%; height: 5px; overflow: hidden; border-radius: var(--radius-full); background: var(--color-gray-light); } ._progressBar_1q74q_1707 { height: 100%; border-radius: inherit; background: var(--color-primary); } /* ============================================================ FEATURE ACCESS ============================================================ */ ._featureCard_1q74q_1731 { min-height: 0; } ._featureGrid_1q74q_1739 { display: grid; grid-template-columns: repeat(5, minmax(0, 1fr)); padding: var(--space-2) var(--space-3); } ._featureItem_1q74q_1755 { min-height: 38px; display: flex; align-items: center; gap: var(--space-2); padding: 0 var(--space-2); border-bottom: 1px solid var(--border-light); color: var(--text-secondary); font-size: var(--font-size-xs); } ._featureItem_1q74q_1755 svg { flex-shrink: 0; color: var(--color-success); } ._allFeaturesBadge_1q74q_1801 { min-height: 30px; display: flex; align-items: center; justify-content: center; gap: var(--space-1); margin: var(--space-2) var(--space-3) var(--space-3); border: 1px solid color-mix(in srgb, var(--color-success) 22%, var(--border-light)); border-radius: var(--radius-sm); color: var(--color-success); background: color-mix(in srgb, var(--color-success) 6%, var(--color-white)); font-size: var(--font-size-xs); font-weight: var(--font-weight-semibold); } /* ============================================================ SUBSCRIBERS TABLE ============================================================ */ ._subscriberTable_1q74q_1857 { width: 100%; overflow-x: auto; } ._subscriberTableHeader_1q74q_1869, ._subscriberTableRow_1q74q_1871 { min-width: 760px; display: grid; grid-template-columns: minmax(190px, 1.55fr) minmax(110px, 0.95fr) minmax(100px, 0.8fr) minmax(110px, 0.9fr) 75px 30px; align-items: center; column-gap: var(--space-2); padding: 0 var(--space-3); box-sizing: border-box; } ._subscriberTableHeader_1q74q_1869 { min-height: 34px; color: var(--text-secondary); background: var(--color-gray-light); font-size: var(--font-size-xs); font-weight: var(--font-weight-semibold); } ._subscriberTableRow_1q74q_1871 { min-height: 44px; border-top: 1px solid var(--border-light); color: var(--text-secondary); font-size: var(--font-size-xs); } ._userCell_1q74q_1957 { min-width: 0; display: flex; align-items: center; gap: var(--space-2); } ._userAvatar_1q74q_1975 { width: 28px; height: 28px; flex: 0 0 28px; display: inline-flex; align-items: center; justify-content: center; border-radius: var(--radius-full); color: var(--color-primary); background: var(--brand-soft); font-size: var(--font-size-xs); font-weight: var(--font-weight-bold); } ._userCell_1q74q_1957 > div { min-width: 0; } ._userCell_1q74q_1957 strong { display: block; overflow: hidden; color: var(--text-primary-dark); font-size: var(--font-size-xs); line-height: 1.3; font-weight: var(--font-weight-semibold); text-overflow: ellipsis; white-space: nowrap; } ._userCell_1q74q_1957 small { display: block; margin-top: 2px; overflow: hidden; color: var(--text-muted); font-size: 11px; line-height: 1.3; text-overflow: ellipsis; white-space: nowrap; } /* ============================================================ VARIANT BADGE ============================================================ */ ._variantBadge_1q74q_2093 { display: inline-flex; align-items: center; min-height: 21px; padding: 0 var(--space-2); border-radius: var(--radius-sm); color: var(--color-primary); background: var(--brand-soft); font-size: 11px; font-weight: var(--font-weight-semibold); white-space: nowrap; } /* ============================================================ BILLING ============================================================ */ ._billingCell_1q74q_2141 { display: flex; align-items: center; gap: var(--space-1); flex-wrap: wrap; } ._saveSmallBadge_1q74q_2159 { display: inline-flex; align-items: center; min-height: 18px; padding: 0 5px; border-radius: 4px; color: var(--color-success); background: color-mix(in srgb, var(--color-success) 12%, var(--color-white)); font-size: 10px; font-weight: var(--font-weight-bold); white-space: nowrap; } /* ============================================================ ACTIVE BADGE ============================================================ */ ._activeBadge_1q74q_2207 { min-width: 48px; min-height: 21px; display: inline-flex; align-items: center; justify-content: center; padding: 0 var(--space-2); box-sizing: border-box; border-radius: var(--radius-sm); color: var(--color-success); background: color-mix(in srgb, var(--color-success) 12%, var(--color-white)); font-size: 11px; font-weight: var(--font-weight-semibold); white-space: nowrap; } /* ============================================================ MORE BUTTON ============================================================ */ ._moreButton_1q74q_2263 { width: 28px; height: 28px; display: flex; align-items: center; justify-content: center; padding: 0; border: 1px solid var(--border-light); border-radius: var(--radius-sm); background: var(--color-white); color: var(--text-secondary); cursor: pointer; } ._moreButton_1q74q_2263:hover { color: var(--color-primary); border-color: color-mix( in srgb, var(--color-primary) 28%, var(--border-light) ); background: var(--brand-soft); } /* ============================================================ SUBSCRIBER FOOTER ============================================================ */ ._subscriberFooter_1q74q_2335 { min-height: 44px; display: flex; align-items: center; justify-content: space-between; gap: var(--space-3); padding: var(--space-2) var(--space-3); border-top: 1px solid var(--border-light); color: var(--text-secondary); font-size: var(--font-size-xs); } ._subscriberFooter_1q74q_2335 strong { color: var(--text-primary-dark); font-weight: var(--font-weight-semibold); } /* ============================================================ RESPONSIVE - LARGE DESKTOP ============================================================ */ @media (max-width: 1600px) { ._overviewGrid_1q74q_751 { grid-template-columns: repeat(2, minmax(0, 1fr)); } ._featureGridFull_1q74q_2401 { grid-template-columns: repeat(5, minmax(0, 1fr)); } } /* ============================================================ RESPONSIVE - LAPTOP ============================================================ */ @media (max-width: 1200px) { ._pageHeader_1q74q_157 { align-items: flex-start; } ._headerActions_1q74q_223 { max-width: 520px; } ._summaryGrid_1q74q_311 { grid-template-columns: repeat(2, minmax(0, 1fr)); } ._overviewGrid_1q74q_751 { grid-template-columns: repeat(2, minmax(0, 1fr)); } ._featureGridFull_1q74q_2401 { grid-template-columns: repeat(3, minmax(0, 1fr)); } } /* ============================================================ RESPONSIVE - TABLET ============================================================ */ @media (max-width: 992px) { ._pageHeader_1q74q_157 { flex-direction: column; } ._headerActions_1q74q_223 { width: 100%; max-width: none; justify-content: flex-start; } ._overviewGrid_1q74q_751 { grid-template-columns: 1fr; } ._resourceTable_1q74q_1299 { overflow-x: auto; } ._resourceTableHeader_1q74q_1307, ._resourceTableRow_1q74q_1309 { min-width: 520px; } } /* ============================================================ RESPONSIVE - MOBILE ============================================================ */ @media (max-width: 768px) { ._planViewPage_1q74q_11 { padding: var(--space-3); } ._headerActions_1q74q_223 { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); } ._headerActions_1q74q_223 .app-btn { width: 100%; } ._summaryGrid_1q74q_311 { grid-template-columns: 1fr; } ._detailRow_1q74q_995 { gap: var(--space-3); } ._detailRow_1q74q_995 > span { flex-basis: 46%; } ._detailRow_1q74q_995 > strong { max-width: 54%; } ._featureGridFull_1q74q_2401 { grid-template-columns: repeat(2, minmax(0, 1fr)); } ._tabsCard_1q74q_605 { overflow-x: auto; } ._tabButton_1q74q_649 { flex-shrink: 0; } } /* ============================================================ RESPONSIVE - SMALL MOBILE ============================================================ */ @media (max-width: 480px) { ._pageTitle_1q74q_185 { font-size: var(--font-size-xl); } ._pageSubtitle_1q74q_205 { font-size: var(--font-size-sm); } ._headerActions_1q74q_223 { grid-template-columns: 1fr; } ._tabButton_1q74q_649 { min-width: 76px; padding: 0 var(--space-2); } ._detailRow_1q74q_995 { align-items: flex-start; gap: var(--space-2); } ._detailRow_1q74q_995 > span { flex-basis: 44%; } ._detailRow_1q74q_995 > strong { max-width: 56%; } ._resourceTableHeader_1q74q_1307, ._resourceTableRow_1q74q_1309 { min-width: 500px; } ._featureGridFull_1q74q_2401 { grid-template-columns: 1fr; } } /* ============================================================ API INTEGRATION STATES ============================================================ */ ._inactiveIcon_1q74q_2721 { color: var(--color-danger); background: color-mix(in srgb, var(--color-danger) 12%, var(--color-white)); } ._inactiveText_1q74q_2733 { color: var(--color-danger); } ._notAllowedBadge_1q74q_2741 { display: inline-flex; align-items: center; gap: var(--space-1); min-height: 22px; padding: 0 var(--space-2); border-radius: var(--radius-sm); color: var(--color-danger); background: color-mix(in srgb, var(--color-danger) 10%, var(--color-white)); font-size: var(--font-size-xs); font-weight: var(--font-weight-semibold); white-space: nowrap; } ._featureItemDisabled_1q74q_2785 { color: var(--text-muted); } ._featureItemDisabled_1q74q_2785 svg { color: var(--color-danger); } ._emptyState_1q74q_2801 { min-height: 120px; display: flex; flex-direction: column; align-items: center; justify-content: center; gap: var(--space-2); padding: var(--space-4); color: var(--text-secondary); font-size: var(--font-size-sm); text-align: center; } ._emptyState_1q74q_2801 strong { color: var(--text-primary-dark); font-size: var(--font-size-base); } /* ============================================================ FULL WIDTH FEATURE ACCESS ============================================================ */ ._featureCardFull_1q74q_2859 { width: 100%; height: auto; } ._featureGridFull_1q74q_2401 { grid-template-columns: repeat(5, minmax(0, 1fr)); } ._featureGridFull_1q74q_2401 ._featureItem_1q74q_1755 { min-height: 42px; } @media (max-width: 1200px) { ._featureGridFull_1q74q_2401 { grid-template-columns: repeat(3, minmax(0, 1fr)); } } @media (max-width: 768px) { ._featureGridFull_1q74q_2401 { grid-template-columns: repeat(2, minmax(0, 1fr)); } } @media (max-width: 480px) { ._featureGridFull_1q74q_2401 { grid-template-columns: 1fr; } } /* ============================================================ TEMPORARY - SUBSCRIBER SECTIONS COMMENTED ============================================================ */ ._bottomGridSingle_1q74q_2929 { grid-template-columns: 1fr; } /* ============================================================ FEATURE ACCESS RESPONSIVE ============================================================ */ @media (max-width: 1200px) { ._featureGrid_1q74q_1739 { grid-template-columns: repeat(3, minmax(0, 1fr)); } } @media (max-width: 768px) { ._featureGrid_1q74q_1739 { grid-template-columns: repeat(2, minmax(0, 1fr)); } } @media (max-width: 480px) { ._featureGrid_1q74q_1739 { grid-template-columns: 1fr; } } /* ============================================================ SUBSCRIPTION CREATE / EDIT PAGE ============================================================ */ ._subscriptionCreatePage_awy2w_9 { width: 100%; min-height: 100%; padding: 24px 28px 30px; box-sizing: border-box; background: #f8fafc; } /* ============================================================ PAGE HEADER ============================================================ */ ._pageHeader_awy2w_33 { width: 100%; display: flex; align-items: flex-start; justify-content: space-between; gap: 24px; margin-bottom: 20px; } ._headerLeft_awy2w_51 { min-width: 0; flex: 1; } ._breadcrumb_awy2w_61 { display: flex; align-items: center; flex-wrap: wrap; gap: 8px; margin-bottom: 8px; } ._breadcrumbLink_awy2w_77 { padding: 0; border: 0; background: transparent; color: #1769ff; font-family: inherit; font-size: 11px; font-weight: 600; cursor: pointer; } ._breadcrumbLink_awy2w_77:hover { text-decoration: underline; } ._breadcrumbSeparator_awy2w_107 { color: #a7b0bf; font-size: 11px; } ._breadcrumbCurrent_awy2w_117 { color: #718098; font-size: 11px; font-weight: 500; } ._pageTitle_awy2w_129 { margin: 0; color: #14213d; font-size: 25px; line-height: 1.2; font-weight: 700; letter-spacing: -0.5px; } ._pageSubtitle_awy2w_147 { max-width: 720px; margin: 7px 0 0; color: #8995a9; font-size: 11px; line-height: 1.5; } ._headerActions_awy2w_163 { display: flex; align-items: center; gap: 9px; flex-shrink: 0; } /* ============================================================ HEADER BUTTONS ============================================================ */ ._cancelButton_awy2w_185, ._saveButton_awy2w_187 { min-height: 35px; display: inline-flex; align-items: center; justify-content: center; gap: 7px; padding: 0 15px; box-sizing: border-box; border-radius: 7px; font-family: inherit; font-size: 11px; font-weight: 600; cursor: pointer; transition: background 0.15s ease, border-color 0.15s ease, box-shadow 0.15s ease, transform 0.15s ease; } ._cancelButton_awy2w_185 { color: #34435e; background: #ffffff; border: 1px solid #dfe5ee; } ._cancelButton_awy2w_185:hover { background: #f8fafc; border-color: #cbd4e1; } ._saveButton_awy2w_187 { color: #ffffff; background: #1769ff; border: 1px solid #1769ff; box-shadow: 0 3px 8px rgba(23, 105, 255, 0.18); } ._saveButton_awy2w_187:hover { background: #0f5ce6; border-color: #0f5ce6; box-shadow: 0 5px 12px rgba(23, 105, 255, 0.22); } ._saveButton_awy2w_187:active { transform: translateY(1px); } ._cancelButton_awy2w_185:disabled, ._saveButton_awy2w_187:disabled, ._bottomCancelButton_awy2w_287:disabled, ._bottomCreateButton_awy2w_289:disabled { opacity: 0.6; cursor: not-allowed; } /* ============================================================ FORM SECTION ============================================================ */ ._formSection_awy2w_307 { width: 100%; box-sizing: border-box; margin-bottom: 14px; padding: 17px 18px 19px; background: #ffffff; border: 1px solid #e5eaf1; border-radius: 11px; box-shadow: 0 2px 5px rgba(24, 39, 75, 0.018), 0 8px 22px rgba(24, 39, 75, 0.025); } /* ============================================================ SECTION HEADER ============================================================ */ ._sectionHeader_awy2w_341 { display: flex; align-items: center; gap: 8px; margin-bottom: 16px; } ._sectionIcon_awy2w_355 { width: 25px; height: 25px; display: inline-flex; align-items: center; justify-content: center; flex-shrink: 0; color: #1769ff; background: #eaf2ff; border-radius: 6px; } ._sectionNumber_awy2w_379 { color: #263653; font-size: 12px; font-weight: 700; } ._sectionTitle_awy2w_391 { color: #263653; font-size: 12px; font-weight: 700; } /* ============================================================ FORM FIELD ============================================================ */ ._formField_awy2w_411 { width: 100%; min-width: 0; } ._fieldLabel_awy2w_421 { display: block; margin-bottom: 7px; color: #33435f; font-size: 10px; line-height: 1.3; font-weight: 600; } ._requiredMark_awy2w_439 { margin-left: 2px; color: #ef4444; } /* ============================================================ SUBSCRIPTION INFORMATION GRID ============================================================ */ ._subscriptionInfoGrid_awy2w_457 { display: grid; grid-template-columns: minmax(180px, 1.3fr) minmax(150px, 1fr) minmax(145px, 1fr) minmax(145px, 1fr) minmax(120px, 0.8fr) minmax(180px, 1.25fr); gap: 17px 18px; align-items: end; } /* ============================================================ TEXT FIELD ============================================================ */ ._textField_awy2w_481 { width: 100%; height: 36px; box-sizing: border-box; padding: 0 11px; color: #33435f; background: #ffffff; border: 1px solid #dfe5ee; border-radius: 6px; outline: none; font-family: inherit; font-size: 11px; transition: border-color 0.15s ease, box-shadow 0.15s ease; } ._textField_awy2w_481::placeholder { color: #a5afbe; } ._textField_awy2w_481:hover { border-color: #cfd7e4; } ._textField_awy2w_481:focus { border-color: #1769ff; box-shadow: 0 0 0 3px rgba(23, 105, 255, 0.07); } /* ============================================================ SELECT ============================================================ */ ._selectWrapper_awy2w_549 { position: relative; width: 100%; } ._selectField_awy2w_559 { width: 100%; height: 36px; box-sizing: border-box; padding: 0 32px 0 11px; appearance: none; color: #53627b; background: #ffffff; border: 1px solid #dfe5ee; border-radius: 6px; outline: none; font-family: inherit; font-size: 11px; cursor: pointer; transition: border-color 0.15s ease, box-shadow 0.15s ease; } ._selectField_awy2w_559:hover { border-color: #cfd7e4; } ._selectField_awy2w_559:focus { border-color: #1769ff; box-shadow: 0 0 0 3px rgba(23, 105, 255, 0.07); } ._selectArrow_awy2w_615 { position: absolute; top: 50%; right: 10px; transform: translateY(-50%); color: #66758e; pointer-events: none; } /* ============================================================ SEGMENTED CONTROL ============================================================ */ ._segmentedControl_awy2w_641 { width: 100%; min-height: 36px; display: flex; box-sizing: border-box; overflow: hidden; border: 1px solid #dfe5ee; border-radius: 6px; background: #ffffff; } ._segmentButton_awy2w_663 { flex: 1; min-width: 0; height: 34px; padding: 0 9px; color: #43516b; background: #ffffff; border: 0; border-right: 1px solid #dfe5ee; font-family: inherit; font-size: 10px; font-weight: 500; cursor: pointer; white-space: nowrap; transition: background 0.15s ease, color 0.15s ease; } ._segmentButton_awy2w_663:last-child { border-right: 0; } ._segmentButton_awy2w_663:hover { background: #f8fafc; } ._segmentButtonActive_awy2w_717 { color: #1769ff; background: #edf4ff; box-shadow: inset 0 0 0 1px #1769ff; } /* ============================================================ STATUS SEGMENTS ============================================================ */ ._statusSegmentedControl_awy2w_737 ._segmentButtonActive_awy2w_717._activeSegment_awy2w_737 { color: #109b67; background: #e2f7ed; box-shadow: inset 0 0 0 1px #8bd6b4; } ._statusSegmentedControl_awy2w_737 ._segmentButtonActive_awy2w_717._trialSegment_awy2w_749 { color: #d98c00; background: #fff2dc; box-shadow: inset 0 0 0 1px #f1c66e; } ._statusSegmentedControl_awy2w_737 ._segmentButtonActive_awy2w_717._pausedSegment_awy2w_761 { color: #e13d43; background: #ffe5e7; box-shadow: inset 0 0 0 1px #ef9ba0; } ._statusSegmentedControl_awy2w_737 ._segmentButtonActive_awy2w_717._paidSegment_awy2w_773 { color: #109b67; background: #e2f7ed; box-shadow: inset 0 0 0 1px #8bd6b4; } ._statusSegmentedControl_awy2w_737 ._segmentButtonActive_awy2w_717._pendingSegment_awy2w_785 { color: #d98c00; background: #fff2dc; box-shadow: inset 0 0 0 1px #f1c66e; } /* ============================================================ DATE FIELD ============================================================ */ ._dateFieldWrapper_awy2w_805 { position: relative; width: 100%; } ._dateField_awy2w_805 { width: 100%; height: 36px; box-sizing: border-box; padding: 0 10px 0 34px; color: #53627b; background: #ffffff; border: 1px solid #dfe5ee; border-radius: 6px; outline: none; font-family: inherit; font-size: 11px; transition: border-color 0.15s ease, box-shadow 0.15s ease; } ._dateField_awy2w_805:hover { border-color: #cfd7e4; } ._dateField_awy2w_805:focus { border-color: #1769ff; box-shadow: 0 0 0 3px rgba(23, 105, 255, 0.07); } ._dateIcon_awy2w_867 { position: absolute; top: 50%; left: 11px; transform: translateY(-50%); color: #66758e; pointer-events: none; } /* ============================================================ AUTO RENEW ============================================================ */ ._autoRenewWrapper_awy2w_893 { min-height: 36px; display: flex; align-items: center; gap: 9px; } ._autoRenewText_awy2w_907 { color: #8190a7; font-size: 10px; line-height: 1.4; } /* ============================================================ TOGGLE ============================================================ */ ._toggle_awy2w_927 { position: relative; width: 32px; height: 18px; flex-shrink: 0; padding: 0; border: 0; border-radius: 20px; background: #cbd3df; cursor: pointer; transition: background 0.15s ease; } ._toggle_awy2w_927:hover { background: #b9c3d1; } ._toggleActive_awy2w_961 { background: #1769ff; } ._toggleActive_awy2w_961:hover { background: #0f5ce6; } ._toggleKnob_awy2w_977 { position: absolute; top: 3px; left: 3px; width: 12px; height: 12px; border-radius: 50%; background: #ffffff; box-shadow: 0 1px 3px rgba(0, 0, 0, 0.18); transition: transform 0.15s ease; } ._toggleActive_awy2w_961 ._toggleKnob_awy2w_977 { transform: translateX(14px); } /* ============================================================ PRICING GRID ============================================================ */ ._pricingGrid_awy2w_1017 { display: grid; grid-template-columns: minmax(130px, 0.85fr) minmax(150px, 1fr) minmax(150px, 1fr) minmax(160px, 1.1fr) minmax(130px, 0.85fr) minmax(150px, 1fr) minmax(150px, 1fr); gap: 17px 18px; align-items: end; } /* ============================================================ CURRENCY INPUT ============================================================ */ ._currencyInput_awy2w_1041 { display: flex; width: 100%; height: 36px; box-sizing: border-box; overflow: hidden; border: 1px solid #dfe5ee; border-radius: 6px; background: #ffffff; transition: border-color 0.15s ease, box-shadow 0.15s ease; } ._currencyInput_awy2w_1041:focus-within { border-color: #1769ff; box-shadow: 0 0 0 3px rgba(23, 105, 255, 0.07); } ._currencyPrefix_awy2w_1079 { min-width: 42px; display: flex; align-items: center; justify-content: center; color: #697791; background: #f8fafc; border-right: 1px solid #dfe5ee; font-size: 9px; font-weight: 600; } ._currencyNumberInput_awy2w_1103 { width: 100%; min-width: 0; padding: 0 10px; color: #53627b; background: #ffffff; border: 0; outline: none; font-family: inherit; font-size: 11px; } /* ============================================================ DISCOUNT VALUE ============================================================ */ ._discountValueWrapper_awy2w_1135 { display: flex; width: 100%; height: 36px; box-sizing: border-box; overflow: hidden; border: 1px solid #dfe5ee; border-radius: 6px; background: #ffffff; transition: border-color 0.15s ease, box-shadow 0.15s ease; } ._discountValueWrapper_awy2w_1135:focus-within { border-color: #1769ff; box-shadow: 0 0 0 3px rgba(23, 105, 255, 0.07); } ._discountInput_awy2w_1173 { width: 100%; min-width: 0; padding: 0 10px; color: #53627b; background: #ffffff; border: 0; outline: none; font-family: inherit; font-size: 11px; } ._discountSuffix_awy2w_1197 { min-width: 42px; display: flex; align-items: center; justify-content: center; color: #697791; background: #f8fafc; border-left: 1px solid #dfe5ee; font-size: 10px; font-weight: 500; } /* ============================================================ COUPON ============================================================ */ ._couponWrapper_awy2w_1229 { position: relative; width: 100%; } ._couponWrapper_awy2w_1229 ._textField_awy2w_481 { padding-right: 32px; } ._couponButton_awy2w_1247 { position: absolute; top: 50%; right: 8px; transform: translateY(-50%); display: flex; align-items: center; justify-content: center; padding: 0; color: #718098; background: transparent; border: 0; cursor: pointer; } /* ============================================================ FINAL AMOUNT ============================================================ */ ._finalAmountField_awy2w_1285 { width: 100%; height: 36px; display: flex; align-items: center; box-sizing: border-box; padding: 0 11px; gap: 9px; color: #748198; background: #f8fafc; border: 1px solid #e0e6ef; border-radius: 6px; font-size: 9px; } ._finalAmountField_awy2w_1285 strong { color: #52617b; font-size: 11px; font-weight: 700; } /* ============================================================ OVERRIDE ============================================================ */ ._overrideWrapper_awy2w_1335 { min-height: 36px; display: flex; align-items: center; gap: 8px; } ._overrideText_awy2w_1349 { color: #8190a7; font-size: 9px; line-height: 1.4; } /* ============================================================ RESOURCE GRID ============================================================ */ ._resourceGrid_awy2w_1369 { display: grid; grid-template-columns: repeat(7, minmax(110px, 1fr)); gap: 16px; } ._resourceField_awy2w_1381 { min-width: 0; } ._resourceLabel_awy2w_1389 { min-height: 30px; display: flex; align-items: center; gap: 5px; margin-bottom: 6px; color: #53627b; font-size: 9px; line-height: 1.3; font-weight: 600; } ._resourceLabel_awy2w_1389 svg { color: #8491a6; flex-shrink: 0; } /* ============================================================ COUNTER ============================================================ */ ._counter_awy2w_1431 { width: 100%; height: 36px; display: flex; align-items: center; box-sizing: border-box; overflow: hidden; border: 1px solid #dfe5ee; border-radius: 6px; background: #ffffff; } ._counterButton_awy2w_1455 { width: 34px; height: 34px; flex-shrink: 0; display: flex; align-items: center; justify-content: center; padding: 0; color: #5e6d85; background: #ffffff; border: 0; cursor: pointer; transition: color 0.15s ease, background 0.15s ease; } ._counterButton_awy2w_1455:hover { color: #1769ff; background: #f5f8fd; } ._counterValue_awy2w_1499 { flex: 1; min-width: 0; display: flex; align-items: center; justify-content: center; height: 34px; padding: 0 3px; box-sizing: border-box; color: #53627b; border-left: 1px solid #e4e8ef; border-right: 1px solid #e4e8ef; font-size: 10px; font-weight: 600; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; } /* ============================================================ FEATURE GRID ============================================================ */ ._featureGrid_awy2w_1545 { display: grid; grid-template-columns: repeat(8, minmax(120px, 1fr)); gap: 12px 18px; } ._featureItem_awy2w_1557 { min-width: 0; min-height: 34px; display: flex; align-items: center; gap: 8px; } ._featureLabel_awy2w_1573 { min-width: 0; color: #53627b; font-size: 9px; font-weight: 600; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; } ._featureInfo_awy2w_1593 { color: #8491a6; flex-shrink: 0; } /* ============================================================ PAYMENT NOTES ============================================================ */ ._paymentNotesGrid_awy2w_1611 { display: grid; grid-template-columns: minmax(180px, 1fr) minmax(260px, 1.5fr) minmax(320px, 2fr); gap: 18px; align-items: start; } /* ============================================================ TEXT AREA ============================================================ */ ._textAreaWrapper_awy2w_1635 { position: relative; width: 100%; } ._textArea_awy2w_1635 { width: 100%; min-height: 76px; height: 76px; box-sizing: border-box; padding: 10px 10px 21px; resize: vertical; color: #53627b; background: #ffffff; border: 1px solid #dfe5ee; border-radius: 6px; outline: none; font-family: inherit; font-size: 10px; line-height: 1.45; transition: border-color 0.15s ease, box-shadow 0.15s ease; } ._textArea_awy2w_1635::placeholder { color: #a5afbe; } ._textArea_awy2w_1635:hover { border-color: #cfd7e4; } ._textArea_awy2w_1635:focus { border-color: #1769ff; box-shadow: 0 0 0 3px rgba(23, 105, 255, 0.07); } ._textAreaCount_awy2w_1711 { position: absolute; right: 8px; bottom: 6px; color: #9aa5b6; font-size: 8px; } /* ============================================================ BOTTOM ACTIONS ============================================================ */ ._bottomActions_awy2w_1735 { display: flex; align-items: center; justify-content: space-between; gap: 15px; margin-top: 18px; padding-top: 14px; border-top: 1px solid #e8ecf2; } ._bottomCancelButton_awy2w_287, ._bottomCreateButton_awy2w_289 { min-height: 36px; display: inline-flex; align-items: center; justify-content: center; gap: 7px; padding: 0 16px; box-sizing: border-box; border-radius: 7px; font-family: inherit; font-size: 11px; font-weight: 600; cursor: pointer; transition: background 0.15s ease, border-color 0.15s ease, box-shadow 0.15s ease, transform 0.15s ease; } ._bottomCancelButton_awy2w_287 { color: #34435e; background: #ffffff; border: 1px solid #dfe5ee; } ._bottomCancelButton_awy2w_287:hover { background: #f8fafc; border-color: #cfd7e4; } ._bottomCreateButton_awy2w_289 { color: #ffffff; background: #1769ff; border: 1px solid #1769ff; padding-left: 18px; padding-right: 19px; box-shadow: 0 3px 8px rgba(23, 105, 255, 0.18); } ._bottomCreateButton_awy2w_289:hover { background: #0f5ce6; border-color: #0f5ce6; box-shadow: 0 5px 12px rgba(23, 105, 255, 0.22); } ._bottomCreateButton_awy2w_289:active { transform: translateY(1px); } /* ============================================================ LARGE DESKTOP 1600px and below ============================================================ */ @media (max-width: 1600px) { ._subscriptionInfoGrid_awy2w_457 { grid-template-columns: repeat(3, minmax(0, 1fr)); } ._pricingGrid_awy2w_1017 { grid-template-columns: repeat(4, minmax(0, 1fr)); } ._resourceGrid_awy2w_1369 { grid-template-columns: repeat(4, minmax(0, 1fr)); } ._featureGrid_awy2w_1545 { grid-template-columns: repeat(4, minmax(0, 1fr)); } } /* ============================================================ DESKTOP / LAPTOP 1300px and below ============================================================ */ @media (max-width: 1300px) { ._subscriptionCreatePage_awy2w_9 { padding: 22px 22px 28px; } ._formSection_awy2w_307 { padding: 16px; } ._subscriptionInfoGrid_awy2w_457 { grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 16px; } ._pricingGrid_awy2w_1017 { grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 16px; } ._resourceGrid_awy2w_1369 { grid-template-columns: repeat(3, minmax(0, 1fr)); } ._featureGrid_awy2w_1545 { grid-template-columns: repeat(4, minmax(0, 1fr)); } ._paymentNotesGrid_awy2w_1611 { grid-template-columns: 1fr 1fr; } ._paymentNotesGrid_awy2w_1611 ._formField_awy2w_411:last-child { grid-column: 1 / -1; } } /* ============================================================ TABLET / MEDIUM 1050px and below ============================================================ */ @media (max-width: 1050px) { ._subscriptionCreatePage_awy2w_9 { padding: 20px 18px 26px; } ._pageHeader_awy2w_33 { gap: 16px; } ._pageTitle_awy2w_129 { font-size: 23px; } ._subscriptionInfoGrid_awy2w_457 { grid-template-columns: repeat(2, minmax(0, 1fr)); } ._pricingGrid_awy2w_1017 { grid-template-columns: repeat(2, minmax(0, 1fr)); } ._resourceGrid_awy2w_1369 { grid-template-columns: repeat(2, minmax(0, 1fr)); } ._featureGrid_awy2w_1545 { grid-template-columns: repeat(3, minmax(0, 1fr)); } ._paymentNotesGrid_awy2w_1611 { grid-template-columns: 1fr; } ._paymentNotesGrid_awy2w_1611 ._formField_awy2w_411:last-child { grid-column: auto; } } /* ============================================================ TABLET 800px and below ============================================================ */ @media (max-width: 800px) { ._subscriptionCreatePage_awy2w_9 { padding: 18px 16px 24px; } ._pageHeader_awy2w_33 { flex-direction: column; align-items: stretch; gap: 14px; } ._headerActions_awy2w_163 { width: 100%; justify-content: flex-end; } ._pageTitle_awy2w_129 { font-size: 22px; } ._pageSubtitle_awy2w_147 { font-size: 10px; } ._formSection_awy2w_307 { margin-bottom: 12px; padding: 15px; border-radius: 10px; } ._sectionHeader_awy2w_341 { margin-bottom: 14px; } ._subscriptionInfoGrid_awy2w_457 { grid-template-columns: 1fr 1fr; gap: 14px; } ._pricingGrid_awy2w_1017 { grid-template-columns: 1fr 1fr; gap: 14px; } ._resourceGrid_awy2w_1369 { grid-template-columns: 1fr 1fr; gap: 14px; } ._featureGrid_awy2w_1545 { grid-template-columns: 1fr 1fr; gap: 10px 16px; } ._paymentNotesGrid_awy2w_1611 { grid-template-columns: 1fr; gap: 14px; } ._bottomActions_awy2w_1735 { margin-top: 14px; } } /* ============================================================ MOBILE 600px and below ============================================================ */ @media (max-width: 600px) { ._subscriptionCreatePage_awy2w_9 { padding: 16px 12px 22px; } ._pageHeader_awy2w_33 { margin-bottom: 16px; } ._breadcrumb_awy2w_61 { gap: 6px; margin-bottom: 7px; } ._breadcrumbLink_awy2w_77, ._breadcrumbSeparator_awy2w_107, ._breadcrumbCurrent_awy2w_117 { font-size: 10px; } ._pageTitle_awy2w_129 { font-size: 21px; letter-spacing: -0.3px; } ._pageSubtitle_awy2w_147 { margin-top: 6px; font-size: 10px; } ._headerActions_awy2w_163 { display: grid; grid-template-columns: 1fr 1fr; gap: 8px; } ._cancelButton_awy2w_185, ._saveButton_awy2w_187 { width: 100%; min-height: 36px; } ._formSection_awy2w_307 { padding: 14px 12px 15px; } ._sectionHeader_awy2w_341 { gap: 7px; margin-bottom: 13px; } ._sectionIcon_awy2w_355 { width: 23px; height: 23px; } ._sectionNumber_awy2w_379, ._sectionTitle_awy2w_391 { font-size: 11px; } ._subscriptionInfoGrid_awy2w_457, ._pricingGrid_awy2w_1017, ._resourceGrid_awy2w_1369, ._featureGrid_awy2w_1545, ._paymentNotesGrid_awy2w_1611 { grid-template-columns: 1fr; } ._resourceGrid_awy2w_1369 { gap: 12px; } ._featureGrid_awy2w_1545 { gap: 10px; } ._featureItem_awy2w_1557 { min-height: 36px; padding: 8px 10px; box-sizing: border-box; background: #f8fafc; border: 1px solid #edf0f5; border-radius: 7px; } ._featureLabel_awy2w_1573 { font-size: 10px; } ._paymentNotesGrid_awy2w_1611 { gap: 13px; } ._textArea_awy2w_1635 { min-height: 85px; height: 85px; } ._bottomActions_awy2w_1735 { flex-direction: column-reverse; align-items: stretch; gap: 9px; padding-top: 12px; } ._bottomCancelButton_awy2w_287, ._bottomCreateButton_awy2w_289 { width: 100%; min-height: 38px; } } /* ============================================================ SMALL MOBILE 420px and below ============================================================ */ @media (max-width: 420px) { ._subscriptionCreatePage_awy2w_9 { padding: 14px 10px 20px; } ._pageTitle_awy2w_129 { font-size: 19px; } ._pageSubtitle_awy2w_147 { font-size: 9px; } ._formSection_awy2w_307 { padding: 13px 10px 14px; border-radius: 9px; } ._fieldLabel_awy2w_421 { font-size: 9px; } ._textField_awy2w_481, ._selectField_awy2w_559, ._dateField_awy2w_805, ._currencyInput_awy2w_1041, ._discountValueWrapper_awy2w_1135, ._finalAmountField_awy2w_1285, ._counter_awy2w_1431, ._segmentedControl_awy2w_641 { height: 35px; } ._segmentButton_awy2w_663 { height: 33px; padding: 0 6px; font-size: 9px; } ._counterButton_awy2w_1455 { width: 32px; height: 33px; } ._counterValue_awy2w_1499 { height: 33px; font-size: 9px; } ._autoRenewText_awy2w_907, ._overrideText_awy2w_1349 { font-size: 9px; } ._resourceLabel_awy2w_1389 { font-size: 9px; } } /* ============================================================ VERY SMALL MOBILE 360px and below ============================================================ */ @media (max-width: 360px) { ._subscriptionCreatePage_awy2w_9 { padding-left: 8px; padding-right: 8px; } ._headerActions_awy2w_163 { grid-template-columns: 1fr; } ._formSection_awy2w_307 { padding-left: 9px; padding-right: 9px; } ._sectionTitle_awy2w_391 { font-size: 10px; } ._segmentedControl_awy2w_641 { min-width: 0; } ._segmentButton_awy2w_663 { padding-left: 4px; padding-right: 4px; font-size: 8px; } ._autoRenewWrapper_awy2w_893, ._overrideWrapper_awy2w_1335 { align-items: flex-start; } } /* ============================================================ ACCESSIBILITY / FOCUS ============================================================ */ button:focus-visible, input:focus-visible, select:focus-visible, textarea:focus-visible { outline: 2px solid rgba(23, 105, 255, 0.35); outline-offset: 2px; } /* ============================================================ REDUCED MOTION ============================================================ */ @media (prefers-reduced-motion: reduce) { ._cancelButton_awy2w_185, ._saveButton_awy2w_187, ._bottomCancelButton_awy2w_287, ._bottomCreateButton_awy2w_289, ._toggle_awy2w_927, ._toggleKnob_awy2w_977, ._segmentButton_awy2w_663, ._counterButton_awy2w_1455 { transition: none; } }/* ============================================================ SUBSCRIPTION VIEW PAGE ============================================================ */ ._subscriptionViewPage_rwymc_9 { width: 100%; min-height: 100%; padding: 18px 24px 26px; box-sizing: border-box; background: #f8fafc; color: #14213d; } /* ============================================================ PAGE HEADER ============================================================ */ ._pageHeader_rwymc_37 { display: flex; align-items: flex-start; justify-content: space-between; gap: 20px; margin-bottom: 18px; } ._breadcrumb_rwymc_53 { display: flex; align-items: center; flex-wrap: wrap; gap: 10px; margin-bottom: 7px; color: #8793a9; font-size: 10px; line-height: 1; } ._breadcrumbLink_rwymc_75 { color: #1769ff; font-weight: 600; cursor: pointer; } ._breadcrumbSlash_rwymc_87 { color: #a8b2c2; } ._pageTitle_rwymc_95 { margin: 0; color: #14213d; font-size: 27px; line-height: 1.2; font-weight: 700; letter-spacing: -0.6px; } ._pageSubtitle_rwymc_113 { margin: 6px 0 0; color: #7f8ca4; font-size: 11px; line-height: 1.4; } /* ============================================================ HEADER ACTIONS ============================================================ */ ._headerActions_rwymc_137 { display: flex; align-items: center; justify-content: flex-end; flex-wrap: wrap; gap: 10px; padding-top: 19px; flex-shrink: 0; } ._editButton_rwymc_157, ._pauseButton_rwymc_159, ._renewButton_rwymc_161 { height: 36px; display: inline-flex; align-items: center; justify-content: center; gap: 7px; padding: 0 14px; border-radius: 7px; font-family: inherit; font-size: 11px; font-weight: 600; cursor: pointer; white-space: nowrap; transition: background 0.15s ease, border-color 0.15s ease, box-shadow 0.15s ease, transform 0.15s ease; } /* ============================================================ EDIT ============================================================ */ ._editButton_rwymc_157 { color: #1d2d4b; background: #ffffff; border: 1px solid #dfe5ee; } ._editButton_rwymc_157:hover { background: #f8fafc; border-color: #cbd4e1; } /* ============================================================ PAUSE ============================================================ */ ._pauseButton_rwymc_159 { color: #ff3d3d; background: #ffffff; border: 1px solid #ff7777; } ._pauseButton_rwymc_159:hover { background: #fff5f5; border-color: #ff5f5f; } /* ============================================================ RENEW ============================================================ */ ._renewButton_rwymc_161 { color: #ffffff; background: #1769ff; border: 1px solid #1769ff; box-shadow: 0 3px 8px rgba(23, 105, 255, 0.18); } ._renewButton_rwymc_161:hover { background: #0f5ce6; border-color: #0f5ce6; box-shadow: 0 5px 12px rgba(23, 105, 255, 0.22); } ._editButton_rwymc_157:active, ._pauseButton_rwymc_159:active, ._renewButton_rwymc_161:active { transform: translateY(1px); } /* ============================================================ SUMMARY GRID ============================================================ */ ._summaryGrid_rwymc_347 { width: 100%; display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 14px; margin-bottom: 13px; } /* ============================================================ SUMMARY CARD ============================================================ */ ._summaryCard_rwymc_383 { min-width: 0; min-height: 81px; display: flex; align-items: center; gap: 13px; padding: 13px 16px; box-sizing: border-box; background: #ffffff; border: 1px solid #e5eaf1; border-radius: 8px; box-shadow: 0 2px 5px rgba(24, 39, 75, 0.025), 0 7px 18px rgba(24, 39, 75, 0.03); } /* ============================================================ SUMMARY ICON ============================================================ */ ._summaryIcon_rwymc_441 { width: 39px; height: 39px; display: flex; align-items: center; justify-content: center; flex-shrink: 0; border-radius: 50%; font-size: 19px; } ._planIcon_rwymc_471 { color: #7d3cff; background: #f0e9ff; } ._activeIcon_rwymc_481 { color: #10ad72; background: #e5f8ef; } ._amountIcon_rwymc_491 { color: #1769ff; background: #eaf2ff; } ._renewalIcon_rwymc_501 { color: #1769ff; background: #eaf2ff; } /* ============================================================ SUMMARY CONTENT ============================================================ */ ._summaryContent_rwymc_521 { min-width: 0; } ._summaryLabel_rwymc_529 { margin-bottom: 5px; color: #7d8aa1; font-size: 9px; line-height: 1.25; font-weight: 600; letter-spacing: 0.2px; } ._summaryValue_rwymc_555 { color: #14213d; font-size: 15px; line-height: 1.2; font-weight: 700; white-space: nowrap; } ._planValueRow_rwymc_577 { display: flex; align-items: center; flex-wrap: wrap; gap: 8px; } ._customBadge_rwymc_591 { display: inline-flex; align-items: center; min-height: 19px; padding: 0 7px; border-radius: 6px; color: #7040df; background: #f1ebff; font-size: 9px; font-weight: 600; } ._statusValue_rwymc_625 { color: #10ad72; font-size: 15px; line-height: 1.2; font-weight: 700; } ._summaryDescription_rwymc_643 { margin-top: 4px; color: #8793a9; font-size: 9px; line-height: 1.3; } /* ============================================================ MAIN CONTENT CARD NO TABS ============================================================ */ ._tabsCard_rwymc_673 { width: 100%; background: #ffffff; border: 1px solid #e5eaf1; border-radius: 8px; box-shadow: 0 2px 5px rgba(24, 39, 75, 0.025), 0 8px 20px rgba(24, 39, 75, 0.035); overflow: hidden; } /* ============================================================ OVERVIEW CONTENT ============================================================ */ ._overviewContent_rwymc_715 { width: 100%; padding: 12px 8px 10px; box-sizing: border-box; } /* ============================================================ TOP CONTENT GRID ============================================================ */ ._topContentGrid_rwymc_737 { width: 100%; display: grid; grid-template-columns: minmax(0, 1.02fr) minmax(0, 0.95fr) minmax(0, 0.95fr) minmax(0, 1.1fr); gap: 10px; } /* ============================================================ INFO CARD ============================================================ */ ._infoCard_rwymc_769, ._featureCard_rwymc_771, ._invoiceCard_rwymc_773 { min-width: 0; background: #ffffff; border: 1px solid #e6ebf2; border-radius: 7px; box-sizing: border-box; } ._infoCard_rwymc_769 { min-height: 226px; padding: 11px 12px; } /* ============================================================ CARD HEADING ============================================================ */ ._cardHeading_rwymc_817 { display: flex; align-items: center; gap: 8px; margin-bottom: 11px; } ._cardHeadingIcon_rwymc_835 { width: 20px; height: 20px; display: flex; align-items: center; justify-content: center; flex-shrink: 0; color: #1769ff; background: #edf4ff; border-radius: 5px; font-size: 11px; } ._cardHeading_rwymc_817 h3 { margin: 0; color: #263a5c; font-size: 10px; line-height: 1.3; font-weight: 700; } /* ============================================================ INFO ROWS ============================================================ */ ._infoRows_rwymc_903 { display: flex; flex-direction: column; gap: 8px; } ._infoRow_rwymc_903 { display: flex; align-items: center; justify-content: space-between; gap: 10px; min-height: 15px; } ._infoLabel_rwymc_937 { color: #74839d; font-size: 9px; font-weight: 500; } ._infoValue_rwymc_951 { min-width: 0; color: #34435e; font-size: 9px; font-weight: 600; text-align: right; overflow-wrap: anywhere; } /* ============================================================ PAYMENT BADGES ============================================================ */ ._paymentBadge_rwymc_987 { display: inline-flex; align-items: center; justify-content: center; min-width: 42px; height: 19px; padding: 0 7px; box-sizing: border-box; border-radius: 6px; font-size: 8px; font-weight: 600; } ._paidBadge_rwymc_1025 { color: #109b67; background: #e2f7ed; } ._pendingBadge_rwymc_1035 { color: #d98c00; background: #fff1dc; } /* ============================================================ PRICING TOTAL ============================================================ */ ._totalRow_rwymc_1055 { display: flex; align-items: center; justify-content: space-between; gap: 10px; margin-top: 3px; padding-top: 9px; border-top: 1px solid #e8edf3; } ._totalRow_rwymc_1055 span { color: #34435e; font-size: 10px; font-weight: 700; } ._totalRow_rwymc_1055 strong { color: #34435e; font-size: 12px; font-weight: 700; white-space: nowrap; } ._autoRenewRow_rwymc_1115 { display: flex; align-items: center; justify-content: space-between; gap: 10px; margin-top: 1px; } ._autoRenewRow_rwymc_1115 span:first-child { color: #74839d; font-size: 9px; } ._enabledBadge_rwymc_1147 { display: inline-flex; align-items: center; justify-content: center; min-height: 19px; padding: 0 8px; border-radius: 6px; color: #109b67; background: #e2f7ed; font-size: 8px; font-weight: 600; } /* ============================================================ RESOURCE ALLOCATION ============================================================ */ ._resourceList_rwymc_1193 { display: flex; flex-direction: column; gap: 8px; } ._resourceRow_rwymc_1207 { display: grid; grid-template-columns: 96px minmax(50px, 1fr) 78px; align-items: center; gap: 7px; min-width: 0; } ._resourceName_rwymc_1233 { color: #74839d; font-size: 8.5px; font-weight: 500; white-space: nowrap; } ._resourceProgress_rwymc_1251 { min-width: 0; } ._progressTrack_rwymc_1259 { width: 100%; height: 5px; overflow: hidden; background: #e9edf3; border-radius: 5px; } ._progressBar_rwymc_1281 { height: 100%; background: #1769ff; border-radius: 5px; } ._resourceValue_rwymc_1297 { color: #52617b; font-size: 8px; font-weight: 500; text-align: right; white-space: nowrap; } /* ============================================================ BOTTOM CONTENT GRID ============================================================ */ ._bottomContentGrid_rwymc_1329 { width: 100%; display: grid; grid-template-columns: minmax(240px, 280px) minmax(0, 1fr); gap: 10px; margin-top: 10px; } /* ============================================================ FEATURE ACCESS ============================================================ */ ._featureCard_rwymc_771 { min-height: 184px; padding: 11px 10px; } ._featureGrid_rwymc_1377 { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 3px; } ._featureItem_rwymc_1395 { min-width: 0; min-height: 34px; display: flex; align-items: center; gap: 7px; padding: 0 8px; box-sizing: border-box; color: #53627b; border: 1px solid #edf0f5; border-radius: 5px; font-size: 8.5px; font-weight: 500; } ._featureCheck_rwymc_1441 { width: 14px; height: 14px; display: inline-flex; align-items: center; justify-content: center; flex-shrink: 0; color: #10b678; font-size: 10px; } /* ============================================================ INVOICE CARD ============================================================ */ ._invoiceCard_rwymc_773 { min-height: 184px; padding: 11px 10px 9px; } ._invoiceTableWrapper_rwymc_1493 { width: 100%; overflow-x: auto; -webkit-overflow-scrolling: touch; } ._invoiceTable_rwymc_1493 { width: 100%; border-collapse: collapse; table-layout: auto; } ._invoiceTable_rwymc_1493 th { height: 28px; padding: 0 8px; color: #74839d; border-bottom: 1px solid #e8edf3; font-size: 8px; line-height: 1; font-weight: 600; text-align: left; white-space: nowrap; } ._invoiceTable_rwymc_1493 td { height: 31px; padding: 0 8px; color: #53627b; border-bottom: 1px solid #eef1f5; font-size: 8.5px; font-weight: 500; white-space: nowrap; } ._invoiceTable_rwymc_1493 tbody tr:last-child td { border-bottom: 0; } ._invoiceTable_rwymc_1493 td:first-child { color: #34435e; font-weight: 700; } /* ============================================================ ACTION BUTTON ============================================================ */ ._actionButton_rwymc_1625 { width: 27px; height: 27px; display: inline-flex; align-items: center; justify-content: center; color: #263a5c; background: #ffffff; border: 1px solid #e2e8f0; border-radius: 6px; font-size: 13px; cursor: pointer; } ._actionButton_rwymc_1625:hover { background: #f8fafc; border-color: #cfd7e4; } /* ============================================================ INVOICE FOOTER ============================================================ */ ._invoiceFooter_rwymc_1687 { display: flex; justify-content: flex-end; margin-top: 7px; } ._viewInvoicesButton_rwymc_1703 { height: 31px; padding: 0 17px; color: #1769ff; background: #ffffff; border: 1px solid #1769ff; border-radius: 6px; font-family: inherit; font-size: 9px; font-weight: 600; cursor: pointer; } ._viewInvoicesButton_rwymc_1703:hover { background: #edf4ff; } /* ============================================================ DISABLED ============================================================ */ ._editButton_rwymc_157:disabled, ._pauseButton_rwymc_159:disabled, ._renewButton_rwymc_161:disabled, ._actionButton_rwymc_1625:disabled, ._viewInvoicesButton_rwymc_1703:disabled { opacity: 0.55; cursor: not-allowed; } /* ============================================================ LARGE DESKTOP ============================================================ */ @media (max-width: 1400px) { ._subscriptionViewPage_rwymc_9 { padding-left: 20px; padding-right: 20px; } ._summaryGrid_rwymc_347 { gap: 12px; } ._topContentGrid_rwymc_737 { grid-template-columns: repeat(2, minmax(0, 1fr)); } ._bottomContentGrid_rwymc_1329 { grid-template-columns: minmax(240px, 260px) minmax(0, 1fr); } } /* ============================================================ TABLET ============================================================ */ @media (max-width: 1100px) { ._pageHeader_rwymc_37 { flex-direction: column; gap: 12px; } ._headerActions_rwymc_137 { width: 100%; justify-content: flex-start; padding-top: 0; } ._summaryGrid_rwymc_347 { grid-template-columns: repeat(2, minmax(0, 1fr)); } ._bottomContentGrid_rwymc_1329 { grid-template-columns: 1fr; } ._featureGrid_rwymc_1377 { grid-template-columns: repeat(4, minmax(0, 1fr)); } } /* ============================================================ SMALL TABLET ============================================================ */ @media (max-width: 800px) { ._subscriptionViewPage_rwymc_9 { padding: 18px 15px 24px; } ._pageTitle_rwymc_95 { font-size: 23px; } ._pageSubtitle_rwymc_113 { font-size: 10px; } ._summaryGrid_rwymc_347 { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 10px; } ._summaryCard_rwymc_383 { min-height: 76px; padding: 12px; } ._summaryIcon_rwymc_441 { width: 36px; height: 36px; font-size: 17px; } ._topContentGrid_rwymc_737 { grid-template-columns: 1fr; } ._featureGrid_rwymc_1377 { grid-template-columns: repeat(2, minmax(0, 1fr)); } ._resourceRow_rwymc_1207 { grid-template-columns: 110px minmax(80px, 1fr) 85px; } } /* ============================================================ MOBILE ============================================================ */ @media (max-width: 560px) { ._subscriptionViewPage_rwymc_9 { padding: 16px 12px 22px; } ._pageHeader_rwymc_37 { gap: 12px; margin-bottom: 15px; } ._breadcrumb_rwymc_53 { gap: 7px; font-size: 9px; } ._pageTitle_rwymc_95 { font-size: 21px; } ._pageSubtitle_rwymc_113 { margin-top: 5px; font-size: 10px; } ._headerActions_rwymc_137 { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); width: 100%; gap: 7px; } ._editButton_rwymc_157, ._pauseButton_rwymc_159, ._renewButton_rwymc_161 { width: 100%; height: 35px; padding: 0 10px; } ._renewButton_rwymc_161 { grid-column: 1 / -1; } ._summaryGrid_rwymc_347 { grid-template-columns: 1fr; gap: 8px; margin-bottom: 10px; } ._summaryCard_rwymc_383 { min-height: 72px; padding: 12px 13px; } ._summaryIcon_rwymc_441 { width: 35px; height: 35px; font-size: 16px; } ._summaryValue_rwymc_555, ._statusValue_rwymc_625 { font-size: 14px; } ._overviewContent_rwymc_715 { padding: 8px 6px; } ._infoCard_rwymc_769 { min-height: auto; padding: 11px; } ._infoRow_rwymc_903 { align-items: flex-start; } ._infoValue_rwymc_951 { max-width: 55%; } ._bottomContentGrid_rwymc_1329 { grid-template-columns: 1fr; } ._featureCard_rwymc_771, ._invoiceCard_rwymc_773 { min-height: auto; } ._featureGrid_rwymc_1377 { grid-template-columns: repeat(2, minmax(0, 1fr)); } ._resourceRow_rwymc_1207 { grid-template-columns: 90px minmax(60px, 1fr); } ._resourceValue_rwymc_1297 { grid-column: 2; text-align: right; margin-top: -4px; } ._invoiceTableWrapper_rwymc_1493 { overflow-x: auto; } ._invoiceTable_rwymc_1493 { min-width: 650px; } } /* ============================================================ VERY SMALL MOBILE ============================================================ */ @media (max-width: 380px) { ._subscriptionViewPage_rwymc_9 { padding-left: 10px; padding-right: 10px; } ._pageTitle_rwymc_95 { font-size: 20px; } ._headerActions_rwymc_137 { grid-template-columns: 1fr; } ._renewButton_rwymc_161 { grid-column: auto; } ._summaryCard_rwymc_383 { min-height: 68px; } ._featureGrid_rwymc_1377 { grid-template-columns: 1fr; } ._resourceRow_rwymc_1207 { grid-template-columns: 80px minmax(50px, 1fr); } } /* ============================================================ BACK BUTTON ============================================================ */ ._backButton_rwymc_2367 { display: inline-flex; align-items: center; gap: 7px; width: fit-content; margin: 0 0 12px; padding: 0; color: #5f6f89; background: transparent; border: 0; outline: none; font-family: inherit; font-size: 11px; line-height: 1.3; font-weight: 600; cursor: pointer; transition: color 0.15s ease, transform 0.15s ease; } ._backButton_rwymc_2367:hover { color: #1769ff; } ._backButton_rwymc_2367:active { transform: translateX(-1px); } ._backArrow_rwymc_2439 { display: inline-flex; align-items: center; justify-content: center; width: 22px; height: 22px; color: #53627b; background: #ffffff; border: 1px solid #e1e7ef; border-radius: 6px; font-size: 14px; line-height: 1; transition: color 0.15s ease, background 0.15s ease, border-color 0.15s ease; } ._backButton_rwymc_2367:hover ._backArrow_rwymc_2439 { color: #1769ff; background: #edf4ff; border-color: #cfe0ff; } /* ============================================================ MOBILE BACK BUTTON ============================================================ */ @media (max-width: 800px) { ._backButton_rwymc_2367 { margin-bottom: 10px; font-size: 10px; } ._backArrow_rwymc_2439 { width: 21px; height: 21px; font-size: 13px; } } @media (max-width: 520px) { ._backButton_rwymc_2367 { margin-bottom: 9px; font-size: 10px; } ._backArrow_rwymc_2439 { width: 20px; height: 20px; } }/* ============================================================ SUBSCRIPTION PAGE Uses the same visual structure as Organization Page ============================================================ */ ._organizationPage_1hidx_11 { width: 100%; min-height: 100%; padding: 26px 28px 30px; box-sizing: border-box; background: #f8fafc; } /* ============================================================ PAGE HEADER ============================================================ */ ._organizationPageHeader_1hidx_37 { display: flex; align-items: flex-start; justify-content: space-between; gap: 20px; margin-bottom: 22px; } ._organizationPageTitle_1hidx_53 { margin: 0; color: #14213d; font-size: 28px; line-height: 1.2; font-weight: 700; letter-spacing: -0.6px; } /* ============================================================ SUMMARY GRID ============================================================ */ ._organizationSummaryGrid_1hidx_81 { display: grid; grid-template-columns: repeat(5, minmax(0, 1fr)); gap: 18px; margin-bottom: 26px; } /* ============================================================ SUMMARY CARD ============================================================ */ ._organizationSummaryCard_1hidx_105 { position: relative; min-height: 142px; padding: 19px 20px 17px; box-sizing: border-box; background: #ffffff; border: 1px solid #e7ebf2; border-radius: 11px; box-shadow: 0 2px 5px rgba(24, 39, 75, 0.025), 0 8px 20px rgba(24, 39, 75, 0.035); overflow: hidden; } ._organizationSummaryCard_1hidx_105::before { content: ""; position: absolute; top: -1px; left: 0; right: 0; height: 3px; border-radius: 10px 10px 0 0; } /* ============================================================ SUMMARY TOP BORDERS ============================================================ */ ._totalCard_1hidx_167::before { background: #1769ff; } ._activeCard_1hidx_175::before { background: #13b879; } ._trialCard_1hidx_183::before { background: #f5a000; } ._suspendedCard_1hidx_191::before { background: #ff3d3d; } ._revenueCard_1hidx_199::before { background: #7d3cff; } /* ============================================================ SUMMARY CONTENT ============================================================ */ ._summaryCardTop_1hidx_217 { display: flex; align-items: center; justify-content: space-between; gap: 10px; } ._summaryCardLabel_1hidx_231 { color: #697791; font-size: 11px; line-height: 1.35; font-weight: 600; letter-spacing: 0.2px; } ._summaryCardIcon_1hidx_247 { width: 34px; height: 34px; display: flex; align-items: center; justify-content: center; flex-shrink: 0; border-radius: 50%; } /* ============================================================ SUMMARY ICON COLORS ============================================================ */ ._totalIcon_1hidx_283 { color: #1769ff; background: #eaf2ff; } ._activeIcon_1hidx_293 { color: #10a86f; background: #e4f8ef; } ._trialIcon_1hidx_303 { color: #e99a00; background: #fff3df; } ._suspendedIcon_1hidx_313 { color: #f0353a; background: #ffe8e8; } ._revenueIcon_1hidx_323 { color: #6c36e8; background: #f0e9ff; } /* ============================================================ SUMMARY VALUES ============================================================ */ ._summaryCardValue_1hidx_343 { margin-top: 20px; color: #14213d; font-size: 24px; line-height: 1; font-weight: 700; letter-spacing: -0.5px; } ._revenueValue_1hidx_369 { font-size: 20px; letter-spacing: -0.3px; white-space: nowrap; } ._summaryCardDescription_1hidx_381 { margin-top: 13px; color: #8a96aa; font-size: 11px; line-height: 1.4; } /* ============================================================ TABLE CARD ============================================================ */ ._organizationTableCard_1hidx_409 { width: 100%; background: #ffffff; border: 1px solid #e5eaf1; border-radius: 12px; box-shadow: 0 2px 5px rgba(24, 39, 75, 0.025), 0 8px 22px rgba(24, 39, 75, 0.035); overflow: visible; } /* ============================================================ TOOLBAR ============================================================ */ ._organizationToolbarActions_1hidx_451 { display: flex; align-items: center; gap: 10px; margin-left: 2px; } /* ============================================================ EXPORT + CREATE BUTTONS ============================================================ */ ._organizationExportBtn_1hidx_479, ._organizationCreateBtn_1hidx_481 { height: 36px; display: inline-flex; align-items: center; justify-content: center; gap: 7px; padding: 0 14px; border-radius: 7px; font-family: inherit; font-size: 12px; font-weight: 600; cursor: pointer; transition: background 0.15s ease, border-color 0.15s ease, box-shadow 0.15s ease, transform 0.15s ease; } /* ============================================================ EXPORT BUTTON ============================================================ */ ._organizationExportBtn_1hidx_479 { color: #1d2c49; background: #ffffff; border: 1px solid #e0e6ef; } ._organizationExportBtn_1hidx_479:hover { background: #f8fafc; border-color: #cfd7e4; } ._organizationExportBtn_1hidx_479:active { transform: translateY(1px); } /* ============================================================ CREATE BUTTON ============================================================ */ ._organizationCreateBtn_1hidx_481 { color: #ffffff; background: #1769ff; border: 1px solid #1769ff; padding-left: 15px; padding-right: 16px; box-shadow: 0 3px 8px rgba(23, 105, 255, 0.18); } ._organizationCreateBtn_1hidx_481:hover { background: #0f5ce6; border-color: #0f5ce6; box-shadow: 0 5px 12px rgba(23, 105, 255, 0.22); } ._organizationCreateBtn_1hidx_481:active { transform: translateY(1px); } /* ============================================================ DISABLED BUTTONS ============================================================ */ ._organizationExportBtn_1hidx_479:disabled, ._organizationCreateBtn_1hidx_481:disabled { opacity: 0.6; cursor: not-allowed; box-shadow: none; } /* ============================================================ ORGANIZATION / SUBSCRIPTION CELL ============================================================ */ ._organizationCell_1hidx_679 { display: flex; align-items: center; gap: 10px; min-width: 0; } /* ============================================================ AVATAR ============================================================ */ ._organizationAvatar_1hidx_709 { width: 30px; height: 30px; display: inline-flex; align-items: center; justify-content: center; flex-shrink: 0; border-radius: 50%; color: #1769ff; background: #eaf2ff; font-size: 10px; font-weight: 700; } /* ============================================================ ORGANIZATION NAME ============================================================ */ ._organizationName_1hidx_763 { color: #1d2d4b; font-size: 12px; font-weight: 600; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; } /* ============================================================ PLAN BADGE ============================================================ */ ._planBadge_1hidx_801 { display: inline-flex; align-items: center; min-height: 22px; padding: 0 8px; border-radius: 6px; font-size: 10px; line-height: 1; font-weight: 600; white-space: nowrap; } ._planBlue_1hidx_841 { color: #1769ff; background: #edf4ff; } ._planPurple_1hidx_853 { color: #7040df; background: #f1ebff; } /* ============================================================ SUBSCRIPTION STATUS ============================================================ */ ._subscriptionStatus_1hidx_875 { display: inline-flex; align-items: center; justify-content: center; min-width: 54px; height: 23px; padding: 0 8px; box-sizing: border-box; border-radius: 6px; font-size: 10px; line-height: 1; font-weight: 600; white-space: nowrap; } /* ============================================================ ACTIVE ============================================================ */ ._isActive_1hidx_937 { color: #109b67; background: #e2f7ed; } /* ============================================================ TRIAL / PENDING ============================================================ */ ._isTrial_1hidx_959 { color: #d98c00; background: #fff2dc; } /* ============================================================ SUSPENDED / FAILED / CANCELLED ============================================================ */ ._isSuspended_1hidx_981 { color: #e13d43; background: #ffe5e7; } /* ============================================================ GENERAL VALUES ============================================================ */ ._contactsValue_1hidx_1003 { color: #34435e; font-size: 11px; font-weight: 500; white-space: nowrap; } /* ============================================================ WEBSITE LINK ============================================================ */ ._websiteLink_1hidx_1033 { display: inline-flex; align-items: center; gap: 5px; color: #1769ff; font-size: 11px; font-weight: 500; text-decoration: none; white-space: nowrap; } ._websiteLink_1hidx_1033:hover { color: #0f5ce6; text-decoration: underline; } /* ============================================================ RESPONSIVE — 1400px ============================================================ */ @media (max-width: 1400px) { ._organizationSummaryGrid_1hidx_81 { gap: 13px; } ._organizationSummaryCard_1hidx_105 { padding-left: 16px; padding-right: 16px; } ._summaryCardLabel_1hidx_231 { font-size: 10px; } ._revenueValue_1hidx_369 { font-size: 18px; } } /* ============================================================ RESPONSIVE — 1150px ============================================================ */ @media (max-width: 1150px) { ._organizationSummaryGrid_1hidx_81 { grid-template-columns: repeat(3, minmax(0, 1fr)); } ._organizationPageHeader_1hidx_37 { flex-wrap: wrap; } } /* ============================================================ RESPONSIVE — 800px ============================================================ */ @media (max-width: 800px) { ._organizationPage_1hidx_11 { padding: 20px 16px; } ._organizationSummaryGrid_1hidx_81 { grid-template-columns: repeat(2, minmax(0, 1fr)); } ._organizationPageTitle_1hidx_53 { font-size: 24px; } ._organizationToolbarActions_1hidx_451 { gap: 6px; } ._organizationExportBtn_1hidx_479 span, ._organizationCreateBtn_1hidx_481 span { display: none; } ._organizationExportBtn_1hidx_479, ._organizationCreateBtn_1hidx_481 { width: 36px; padding: 0; } ._organizationName_1hidx_763 { max-width: 150px; } ._contactsValue_1hidx_1003 { max-width: 160px; overflow: hidden; text-overflow: ellipsis; } } /* ============================================================ RESPONSIVE — 520px ============================================================ */ @media (max-width: 520px) { ._organizationPage_1hidx_11 { padding: 18px 12px 24px; } ._organizationSummaryGrid_1hidx_81 { grid-template-columns: 1fr; } ._organizationPageHeader_1hidx_37 { margin-bottom: 18px; } ._organizationPageTitle_1hidx_53 { font-size: 22px; } ._organizationSummaryCard_1hidx_105 { min-height: 135px; } ._organizationToolbarActions_1hidx_451 { width: 100%; } ._organizationExportBtn_1hidx_479, ._organizationCreateBtn_1hidx_481 { width: 36px; } }/* ============================================================ USAGE PAGE ============================================================ */ ._usagePage_1qbj2_9 { width: 100%; min-height: 100%; padding: 20px 22px 24px; box-sizing: border-box; background: #ffffff; color: #14264a; } /* ============================================================ PAGE HEADER ============================================================ */ ._pageHeader_1qbj2_35 { display: flex; align-items: center; justify-content: space-between; gap: 16px; margin-bottom: 18px; } ._pageTitle_1qbj2_51 { margin: 0; color: #14264a; font-size: 22px; font-weight: 700; line-height: 1.2; letter-spacing: -0.25px; } ._headerActions_1qbj2_69 { display: flex; align-items: center; justify-content: flex-end; gap: 8px; } /* ============================================================ SEARCH ============================================================ */ ._searchBox_1qbj2_91 { width: 270px; height: 38px; display: flex; align-items: center; gap: 8px; padding: 0 11px; box-sizing: border-box; border: 1px solid #dce4f0; border-radius: 7px; background: #ffffff; color: #8290a8; transition: border-color 0.2s ease, box-shadow 0.2s ease; } ._searchBox_1qbj2_91:focus-within { border-color: #2563eb; box-shadow: 0 0 0 2px rgba(37, 99, 235, 0.07); } ._searchBox_1qbj2_91 input { width: 100%; min-width: 0; border: none; outline: none; background: transparent; color: #1b2d50; font-size: 11px; font-family: inherit; } ._searchBox_1qbj2_91 input::placeholder { color: #8794ab; } /* ============================================================ BUTTONS ============================================================ */ ._secondaryButton_1qbj2_189, ._primaryButton_1qbj2_191 { height: 38px; display: inline-flex; align-items: center; justify-content: center; gap: 7px; padding: 0 13px; border-radius: 7px; font-family: inherit; font-size: 11px; font-weight: 600; cursor: pointer; white-space: nowrap; transition: background-color 0.2s ease, border-color 0.2s ease, color 0.2s ease, box-shadow 0.2s ease, transform 0.1s ease; } ._secondaryButton_1qbj2_189 { border: 1px solid #dce4f0; background: #ffffff; color: #182b50; } ._secondaryButton_1qbj2_189:hover { border-color: #c7d3e5; background: #f8faff; } ._secondaryButton_1qbj2_189:active, ._primaryButton_1qbj2_191:active { transform: translateY(1px); } ._secondaryButtonActive_1qbj2_277 { border-color: #2563eb; color: #2563eb; background: #f5f8ff; } ._primaryButton_1qbj2_191 { border: 1px solid #1765ed; background: #1765ed; color: #ffffff; box-shadow: 0 2px 6px rgba(23, 101, 237, 0.14); } ._primaryButton_1qbj2_191:hover { background: #1258d4; border-color: #1258d4; } /* ============================================================ FILTER PANEL ============================================================ */ ._filterPanel_1qbj2_323 { display: flex; align-items: flex-end; gap: 12px; margin-bottom: 16px; padding: 13px 15px; border: 1px solid #e1e7f0; border-radius: 8px; background: #fbfcfe; } ._filterField_1qbj2_351 { display: flex; flex-direction: column; gap: 5px; min-width: 165px; } ._filterField_1qbj2_351 label { color: #455674; font-size: 10px; font-weight: 600; } ._filterField_1qbj2_351 select { height: 34px; padding: 0 30px 0 10px; border: 1px solid #dce4f0; border-radius: 6px; outline: none; background: #ffffff; color: #1b2d50; font-family: inherit; font-size: 11px; cursor: pointer; } ._filterField_1qbj2_351 select:focus { border-color: #2563eb; box-shadow: 0 0 0 2px rgba(37, 99, 235, 0.06); } ._clearFilterButton_1qbj2_425 { height: 34px; padding: 0 12px; border: 1px solid #dce4f0; border-radius: 6px; background: #ffffff; color: #52627d; font-family: inherit; font-size: 11px; font-weight: 600; cursor: pointer; } ._clearFilterButton_1qbj2_425:hover { background: #f4f7fb; color: #1d4ed8; } /* ============================================================ SUMMARY / STAT CARDS ============================================================ */ ._statsGrid_1qbj2_479 { display: grid; grid-template-columns: repeat(5, minmax(0, 1fr)); gap: 11px; margin-bottom: 16px; } ._statCard_1qbj2_495 { min-height: 108px; display: flex; align-items: flex-start; gap: 10px; padding: 13px; box-sizing: border-box; border: 1px solid #e2e8f1; border-radius: 8px; background: #ffffff; box-shadow: 0 1px 3px rgba(20, 38, 74, 0.02), 0 5px 14px rgba(20, 38, 74, 0.02); } ._statIcon_1qbj2_537 { width: 32px; height: 32px; flex: 0 0 32px; display: flex; align-items: center; justify-content: center; border-radius: 50%; font-size: 14px; } ._statContent_1qbj2_567 { min-width: 0; flex: 1; display: flex; flex-direction: column; align-items: flex-start; } ._statTitle_1qbj2_585 { display: block; color: #51627f; font-size: 9px; font-weight: 700; line-height: 1.25; text-transform: uppercase; } ._statValue_1qbj2_609 { display: block; margin-top: 5px; color: #14264a; font-size: 18px; font-weight: 700; line-height: 1.1; letter-spacing: -0.2px; } ._statDescription_1qbj2_637 { display: block; margin-top: 4px; color: #70809b; font-size: 10px; line-height: 1.3; } /* ============================================================ STAT ICON COLORS ============================================================ */ ._iconBlue_1qbj2_667 { color: #1765ed; background: #edf4ff; } ._iconGreen_1qbj2_677 { color: #13b879; background: #eafaf3; } ._iconPurple_1qbj2_687 { color: #7c3aed; background: #f3edff; } ._iconWhatsApp_1qbj2_697 { color: #0bb981; background: #e9faf3; } /* ============================================================ STAT PROGRESS ============================================================ */ ._statProgress_1qbj2_715 { width: 100%; height: 4px; margin-top: 8px; overflow: hidden; border-radius: 999px; background: #e8edf4; } ._statProgressFill_1qbj2_741 { height: 100%; border-radius: inherit; background: #13bd7c; transition: width 0.3s ease; } ._statPercentage_1qbj2_761 { margin-top: 4px; color: #667894; font-size: 9px; font-weight: 500; } /* ============================================================ TABLE CARD ============================================================ */ ._tableCard_1qbj2_787 { width: 100%; overflow: hidden; border: 1px solid #e1e7f0; border-radius: 8px; background: #ffffff; box-shadow: 0 1px 3px rgba(20, 38, 74, 0.02), 0 5px 14px rgba(20, 38, 74, 0.02); } ._tableWrapper_1qbj2_815 { width: 100%; overflow-x: auto; } ._usageTable_1qbj2_825 { width: 100%; min-width: 1050px; border-collapse: separate; border-spacing: 0; table-layout: fixed; } /* ============================================================ TABLE HEADER ============================================================ */ ._usageTable_1qbj2_825 th { height: 42px; padding: 0 10px; border-bottom: 1px solid #e4e9f1; background: #ffffff; color: #263a5e; font-size: 10px; font-weight: 700; text-align: left; white-space: nowrap; } /* ============================================================ TABLE BODY ============================================================ */ ._usageTable_1qbj2_825 td { height: 54px; padding: 6px 10px; border-bottom: 1px solid #edf0f5; color: #23385e; font-size: 10px; font-weight: 500; vertical-align: middle; } ._usageTable_1qbj2_825 tbody tr:last-child td { border-bottom: none; } ._usageTable_1qbj2_825 tbody tr { transition: background-color 0.15s ease; } ._clickableRow_1qbj2_945 { cursor: pointer; } ._clickableRow_1qbj2_945:hover { background: #fafcff; } /* ============================================================ TABLE COLUMN WIDTHS ============================================================ */ ._usageTable_1qbj2_825 th:nth-child(1), ._usageTable_1qbj2_825 td:nth-child(1) { width: 145px; } ._usageTable_1qbj2_825 th:nth-child(2), ._usageTable_1qbj2_825 td:nth-child(2) { width: 90px; } ._usageTable_1qbj2_825 th:nth-child(3), ._usageTable_1qbj2_825 td:nth-child(3), ._usageTable_1qbj2_825 th:nth-child(4), ._usageTable_1qbj2_825 td:nth-child(4), ._usageTable_1qbj2_825 th:nth-child(5), ._usageTable_1qbj2_825 td:nth-child(5), ._usageTable_1qbj2_825 th:nth-child(6), ._usageTable_1qbj2_825 td:nth-child(6) { width: 125px; } ._usageTable_1qbj2_825 th:nth-child(7), ._usageTable_1qbj2_825 td:nth-child(7) { width: 75px; } ._usageTable_1qbj2_825 th:nth-child(8), ._usageTable_1qbj2_825 td:nth-child(8) { width: 55px; } ._usageTable_1qbj2_825 th:nth-child(9), ._usageTable_1qbj2_825 td:nth-child(9) { width: 85px; } ._usageTable_1qbj2_825 th:nth-child(10), ._usageTable_1qbj2_825 td:nth-child(10) { width: 55px; text-align: center; } /* ============================================================ ORGANIZATION CELL ============================================================ */ ._organizationCell_1qbj2_1061 { display: flex; align-items: center; gap: 8px; min-width: 0; } ._organizationAvatar_1qbj2_1077 { width: 30px; height: 30px; flex: 0 0 30px; display: flex; align-items: center; justify-content: center; border-radius: 50%; background: #edf4ff; color: #2168e9; font-size: 9px; font-weight: 700; } ._organizationCell_1qbj2_1061 > span:last-child { min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; color: #213657; font-size: 10px; font-weight: 600; } /* ============================================================ PLAN BADGES ============================================================ */ ._planBadge_1qbj2_1149 { display: inline-flex; align-items: center; justify-content: center; min-height: 20px; padding: 0 7px; border-radius: 5px; font-size: 9px; font-weight: 600; white-space: nowrap; } ._planDefault_1qbj2_1183 { color: #1765ed; background: #edf4ff; } ._planCustom_1qbj2_1193 { color: #7c3aed; background: #f4edff; } /* ============================================================ USAGE CELL ============================================================ */ ._usageCell_1qbj2_1211 { width: 100%; max-width: 125px; } ._usageNumbers_1qbj2_1221 { display: flex; align-items: center; justify-content: space-between; gap: 5px; margin-bottom: 5px; color: #405476; font-size: 9px; line-height: 1.2; white-space: nowrap; } ._usageNumbers_1qbj2_1221 span:first-child { overflow: hidden; text-overflow: ellipsis; } ._usageNumbers_1qbj2_1221 span:last-child { flex-shrink: 0; color: #566987; } ._usageBar_1qbj2_1275 { width: 100%; height: 3px; overflow: hidden; border-radius: 999px; background: #e9edf3; } ._usageBarFill_1qbj2_1297 { height: 100%; min-width: 2px; border-radius: inherit; transition: width 0.3s ease; } ._usageNormal_1qbj2_1317 { background: #1765ed; } ._usageWarning_1qbj2_1325 { background: #f59e0b; } ._usageDanger_1qbj2_1333 { background: #ef3340; } /* ============================================================ STATUS BADGES ============================================================ */ ._statusBadge_1qbj2_1349 { display: inline-flex; align-items: center; justify-content: center; min-height: 20px; padding: 0 7px; border-radius: 5px; font-size: 9px; font-weight: 600; white-space: nowrap; } ._statusActive_1qbj2_1383 { color: #0b9b68; background: #e8f9f1; } ._statusWarning_1qbj2_1393 { color: #d97706; background: #fff6df; } ._statusOverLimit_1qbj2_1403 { color: #ef3340; background: #fff0f1; border: 1px solid #ffc8cd; } /* ============================================================ ACTION BUTTON ============================================================ */ ._actionButton_1qbj2_1425 { width: 30px; height: 30px; display: inline-flex; align-items: center; justify-content: center; border: 1px solid #e1e7f0; border-radius: 6px; background: #ffffff; color: #52627c; cursor: pointer; font-size: 12px; transition: border-color 0.2s ease, background-color 0.2s ease, color 0.2s ease; } ._actionButton_1qbj2_1425:hover { border-color: #cbd7e8; background: #f7f9fc; color: #1765ed; } /* ============================================================ EMPTY / LOADING ============================================================ */ ._emptyState_1qbj2_1493 { height: 140px !important; color: #7b899f !important; text-align: center !important; font-size: 11px !important; font-weight: 500 !important; } /* ============================================================ PAGINATION ============================================================ */ ._pagination_1qbj2_1523 { min-height: 54px; display: flex; align-items: center; justify-content: space-between; gap: 15px; padding: 0 14px; box-sizing: border-box; border-top: 1px solid #edf0f5; background: #ffffff; } ._paginationInfo_1qbj2_1559 { color: #718099; font-size: 10px; white-space: nowrap; } ._paginationInfo_1qbj2_1559 strong { color: #263a5e; font-weight: 600; } ._paginationRight_1qbj2_1585 { display: flex; align-items: center; justify-content: flex-end; gap: 8px; color: #718099; font-size: 10px; } ._paginationRight_1qbj2_1585 > select { height: 30px; min-width: 58px; padding: 0 7px; border: 1px solid #dce4f0; border-radius: 6px; outline: none; background: #ffffff; color: #24395d; font-family: inherit; font-size: 10px; cursor: pointer; } ._paginationRight_1qbj2_1585 > select:focus { border-color: #2563eb; } /* ============================================================ PAGE BUTTONS ============================================================ */ ._pageButtons_1qbj2_1667 { display: flex; align-items: center; gap: 4px; } ._pageButtons_1qbj2_1667 button { width: 30px; height: 30px; display: inline-flex; align-items: center; justify-content: center; border: 1px solid #dfe6ef; border-radius: 6px; background: #ffffff; color: #425574; font-family: inherit; font-size: 10px; font-weight: 500; cursor: pointer; transition: background-color 0.15s ease, border-color 0.15s ease, color 0.15s ease; } ._pageButtons_1qbj2_1667 button:hover:not(:disabled) { border-color: #bfcde0; background: #f7f9fc; color: #1765ed; } ._pageButtons_1qbj2_1667 button:disabled { opacity: 0.45; cursor: not-allowed; } ._pageButtons_1qbj2_1667 ._pageButtonActive_1qbj2_1753 { border-color: #1765ed; background: #1765ed; color: #ffffff; } ._pageButtons_1qbj2_1667 ._pageButtonActive_1qbj2_1753:hover { border-color: #1765ed; background: #1765ed; color: #ffffff; } /* ============================================================ RESPONSIVE - LARGE TABLETS ============================================================ */ @media (max-width: 1400px) { ._usagePage_1qbj2_9 { padding: 18px 20px 22px; } ._statsGrid_1qbj2_479 { grid-template-columns: repeat(3, minmax(0, 1fr)); } ._pageHeader_1qbj2_35 { align-items: flex-start; } ._headerActions_1qbj2_69 { flex-wrap: wrap; } } /* ============================================================ RESPONSIVE - TABLET ============================================================ */ @media (max-width: 1100px) { ._usagePage_1qbj2_9 { padding: 18px 17px 20px; } ._pageHeader_1qbj2_35 { flex-direction: column; align-items: stretch; } ._headerActions_1qbj2_69 { width: 100%; justify-content: flex-start; } ._searchBox_1qbj2_91 { flex: 1; width: auto; min-width: 200px; } ._statsGrid_1qbj2_479 { grid-template-columns: repeat(2, minmax(0, 1fr)); } ._statCard_1qbj2_495 { min-height: 102px; } ._pagination_1qbj2_1523 { align-items: flex-start; flex-direction: column; padding: 12px 14px; } ._paginationRight_1qbj2_1585 { width: 100%; justify-content: flex-end; } } /* ============================================================ RESPONSIVE - MOBILE ============================================================ */ @media (max-width: 700px) { ._usagePage_1qbj2_9 { padding: 15px 12px 20px; } ._pageTitle_1qbj2_51 { font-size: 19px; } ._headerActions_1qbj2_69 { display: grid; grid-template-columns: 1fr 1fr; gap: 7px; } ._searchBox_1qbj2_91 { grid-column: 1 / -1; width: 100%; min-width: 0; } ._secondaryButton_1qbj2_189, ._primaryButton_1qbj2_191 { width: 100%; padding: 0 9px; } ._filterPanel_1qbj2_323 { flex-direction: column; align-items: stretch; gap: 9px; padding: 11px 12px; } ._filterField_1qbj2_351 { width: 100%; min-width: 0; } ._filterField_1qbj2_351 select { width: 100%; } ._clearFilterButton_1qbj2_425 { width: 100%; } ._statsGrid_1qbj2_479 { grid-template-columns: 1fr; gap: 8px; } ._statCard_1qbj2_495 { min-height: 96px; padding: 11px; } ._tableCard_1qbj2_787 { border-radius: 7px; } ._pagination_1qbj2_1523 { gap: 12px; } ._paginationInfo_1qbj2_1559 { white-space: normal; } ._paginationRight_1qbj2_1585 { flex-wrap: wrap; justify-content: flex-start; } } /* ============================================================ RESPONSIVE - SMALL MOBILE ============================================================ */ @media (max-width: 450px) { ._usagePage_1qbj2_9 { padding: 13px 9px 18px; } ._pageTitle_1qbj2_51 { font-size: 18px; } ._headerActions_1qbj2_69 { grid-template-columns: 1fr; } ._searchBox_1qbj2_91 { grid-column: auto; } ._paginationRight_1qbj2_1585 { align-items: flex-start; flex-direction: column; } ._pageButtons_1qbj2_1667 { width: 100%; justify-content: flex-start; } } /* ============================================================ ACCESSIBILITY ============================================================ */ ._secondaryButton_1qbj2_189:focus-visible, ._primaryButton_1qbj2_191:focus-visible, ._actionButton_1qbj2_1425:focus-visible, ._clearFilterButton_1qbj2_425:focus-visible, ._pageButtons_1qbj2_1667 button:focus-visible, ._filterField_1qbj2_351 select:focus-visible, ._paginationRight_1qbj2_1585 select:focus-visible { outline: 2px solid #2563eb; outline-offset: 2px; } /* ============================================================ REDUCED MOTION ============================================================ */ @media (prefers-reduced-motion: reduce) { ._searchBox_1qbj2_91, ._secondaryButton_1qbj2_189, ._primaryButton_1qbj2_191, ._actionButton_1qbj2_1425, ._pageButtons_1qbj2_1667 button, ._usageBarFill_1qbj2_1297, ._statProgressFill_1qbj2_741, ._clickableRow_1qbj2_945 { transition: none; } } /* ============================================================ USAGE DETAILS PAGE ============================================================ */ ._usageDetailsPage_1fb7a_9 { width: 100%; min-height: 100%; padding: 20px 24px 28px; box-sizing: border-box; background: #f8fafc; color: #172033; } /* ============================================================ TOP BAR ============================================================ */ ._detailsTopBar_1fb7a_35 { display: flex; align-items: flex-start; justify-content: space-between; gap: 18px; margin-bottom: 18px; } ._breadcrumb_1fb7a_51 { display: flex; align-items: center; flex-wrap: wrap; gap: 5px; margin-bottom: 5px; font-size: 10px; line-height: 15px; color: #8a94a6; } ._breadcrumb_1fb7a_51 button { border: 0; padding: 0; background: transparent; color: #64748b; font: inherit; cursor: pointer; transition: color 0.2s ease; } ._breadcrumb_1fb7a_51 button:hover { color: #2563eb; } ._breadcrumb_1fb7a_51 span:last-child { color: #475569; font-weight: 600; } ._pageTitle_1fb7a_111 { margin: 0; color: #111827; font-size: 22px; line-height: 28px; font-weight: 700; letter-spacing: -0.02em; } ._pageSubtitle_1fb7a_129 { margin: 4px 0 0; color: #7b8798; font-size: 11px; line-height: 16px; } /* ============================================================ HEADER ACTIONS ============================================================ */ ._headerActions_1fb7a_151 { display: flex; align-items: center; justify-content: flex-end; gap: 7px; flex-wrap: wrap; } ._secondaryButton_1fb7a_167, ._primaryButton_1fb7a_169 { height: 34px; display: inline-flex; align-items: center; justify-content: center; gap: 5px; padding: 0 11px; border-radius: 6px; font-size: 10px; font-weight: 600; white-space: nowrap; cursor: pointer; transition: background 0.2s ease, border-color 0.2s ease, color 0.2s ease, box-shadow 0.2s ease, transform 0.2s ease; } ._secondaryButton_1fb7a_167 { border: 1px solid #d8dee8; background: #ffffff; color: #475569; } ._secondaryButton_1fb7a_167:hover { background: #f8fafc; border-color: #c5cedb; color: #1e293b; } ._primaryButton_1fb7a_169 { border: 1px solid #2563eb; background: #2563eb; color: #ffffff; box-shadow: 0 2px 5px rgba(37, 99, 235, 0.12); } ._primaryButton_1fb7a_169:hover { background: #1d4ed8; border-color: #1d4ed8; } ._primaryButton_1fb7a_169:disabled, ._secondaryButton_1fb7a_167:disabled { opacity: 0.6; cursor: not-allowed; } /* ============================================================ INFO CARDS ============================================================ */ ._detailInfoGrid_1fb7a_277 { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 10px; margin-bottom: 14px; } ._detailInfoCard_1fb7a_291 { min-width: 0; min-height: 78px; display: flex; align-items: flex-start; gap: 9px; padding: 11px 12px; box-sizing: border-box; border: 1px solid #e4e8ef; border-radius: 8px; background: #ffffff; box-shadow: 0 1px 2px rgba(15, 23, 42, 0.025); } ._detailInfoIcon_1fb7a_319 { width: 30px; height: 30px; flex: 0 0 30px; display: flex; align-items: center; justify-content: center; border-radius: 7px; font-size: 13px; font-weight: 600; } ._infoPurple_1fb7a_343 { background: #f1ebff; color: #7c3aed; } ._infoGreen_1fb7a_353 { background: #e9f9f0; color: #16a34a; } ._infoBlue_1fb7a_363 { background: #e9f2ff; color: #2563eb; } ._detailInfoContent_1fb7a_373 { min-width: 0; display: flex; flex-direction: column; gap: 2px; } ._detailInfoContent_1fb7a_373 > span:first-child { color: #8a94a6; font-size: 9px; line-height: 13px; font-weight: 700; letter-spacing: 0.05em; } ._detailInfoContent_1fb7a_373 > div { display: flex; align-items: center; flex-wrap: wrap; gap: 5px; min-width: 0; } ._detailInfoContent_1fb7a_373 strong { color: #1f2937; font-size: 12px; line-height: 17px; font-weight: 700; word-break: break-word; } ._detailInfoContent_1fb7a_373 small { display: block; color: #8a94a6; font-size: 9px; line-height: 14px; } ._smallBadge_1fb7a_449 { display: inline-flex; align-items: center; min-height: 19px; padding: 1px 6px; box-sizing: border-box; border-radius: 5px; background: #f2f4f8; color: #64748b; font-size: 9px; font-weight: 600; } ._activeText_1fb7a_475 { color: #16a34a !important; } /* ============================================================ MAIN DETAILS CARD ============================================================ */ ._detailsMainCard_1fb7a_491 { overflow: hidden; border: 1px solid #e2e7ef; border-radius: 8px; background: #ffffff; box-shadow: 0 2px 6px rgba(15, 23, 42, 0.025); } /* ============================================================ TABS ============================================================ */ ._tabs_1fb7a_515 { height: 44px; display: flex; align-items: stretch; gap: 2px; padding: 0 13px; box-sizing: border-box; border-bottom: 1px solid #e8ebf0; background: #ffffff; } ._tabs_1fb7a_515 button { position: relative; min-width: 78px; height: 44px; padding: 0 9px; border: 0; background: transparent; color: #7b8798; font-size: 10px; font-weight: 600; cursor: pointer; transition: color 0.2s ease, background 0.2s ease; } ._tabs_1fb7a_515 button:hover { color: #2563eb; } ._tabActive_1fb7a_577 { color: #2563eb !important; } ._tabActive_1fb7a_577::after { content: ""; position: absolute; left: 9px; right: 9px; bottom: -1px; height: 2px; border-radius: 2px 2px 0 0; background: #2563eb; } /* ============================================================ OVERVIEW CONTENT ============================================================ */ ._overviewContent_1fb7a_615 { padding: 15px; box-sizing: border-box; } /* ============================================================ ORGANIZATION OVERVIEW ============================================================ */ ._organizationOverview_1fb7a_633 { min-height: 58px; display: flex; align-items: center; gap: 10px; padding: 10px 11px; margin-bottom: 14px; box-sizing: border-box; border: 1px solid #e7ebf1; border-radius: 7px; background: #fbfcfe; } ._organizationAvatarLarge_1fb7a_659 { width: 36px; height: 36px; flex: 0 0 36px; display: flex; align-items: center; justify-content: center; border-radius: 50%; background: #e9efff; color: #315fd6; font-size: 11px; font-weight: 700; } ._organizationOverview_1fb7a_633 > div:nth-child(2) { min-width: 0; flex: 1; } ._organizationNameRow_1fb7a_697 { display: flex; align-items: center; flex-wrap: wrap; gap: 5px; } ._organizationNameRow_1fb7a_697 strong { color: #1f2937; font-size: 12px; line-height: 17px; font-weight: 700; } ._statusBadgeActive_1fb7a_725 { display: inline-flex; align-items: center; min-height: 18px; padding: 1px 6px; box-sizing: border-box; border-radius: 999px; background: #eaf8ef; color: #159447; font-size: 8px; line-height: 12px; font-weight: 700; } ._organizationMeta_1fb7a_753 { display: flex; align-items: center; flex-wrap: wrap; gap: 5px; margin-top: 2px; color: #8a94a6; font-size: 9px; line-height: 14px; } ._viewOrganizationButton_1fb7a_775 { height: 30px; display: inline-flex; align-items: center; justify-content: center; gap: 5px; flex: 0 0 auto; padding: 0 9px; border: 1px solid #d9e0e9; border-radius: 6px; background: #ffffff; color: #526174; font-size: 9px; font-weight: 600; cursor: pointer; transition: background 0.2s ease, border-color 0.2s ease, color 0.2s ease; } ._viewOrganizationButton_1fb7a_775:hover { border-color: #c6d0de; background: #f8fafc; color: #2563eb; } /* ============================================================ RESOURCE GRID ============================================================ */ ._resourceGrid_1fb7a_837 { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 9px; } /* ============================================================ RESOURCE CARD ============================================================ */ ._resourceCard_1fb7a_857 { min-width: 0; min-height: 90px; padding: 10px 11px; box-sizing: border-box; border: 1px solid #e6eaf0; border-radius: 7px; background: #ffffff; transition: border-color 0.2s ease, box-shadow 0.2s ease, transform 0.2s ease; } ._resourceCard_1fb7a_857:hover { border-color: #d5dce7; box-shadow: 0 3px 10px rgba(15, 23, 42, 0.045); } ._resourceHeader_1fb7a_895 { display: flex; align-items: center; justify-content: space-between; gap: 7px; margin-bottom: 9px; } ._resourceTitle_1fb7a_911 { min-width: 0; display: flex; align-items: center; gap: 6px; color: #334155; font-size: 10px; line-height: 15px; font-weight: 600; } ._resourceTitle_1fb7a_911 > span:last-child { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; } ._resourceIcon_1fb7a_945 { width: 24px; height: 24px; flex: 0 0 24px; display: flex; align-items: center; justify-content: center; border-radius: 5px; background: #f1f5f9; color: #64748b; font-size: 11px; } ._resourceNumbers_1fb7a_971 { flex: 0 0 auto; color: #475569; font-size: 9px; line-height: 14px; font-weight: 600; white-space: nowrap; } ._resourceProgressRow_1fb7a_989 { display: flex; align-items: center; gap: 6px; } ._resourceProgress_1fb7a_989 { width: 100%; height: 5px; overflow: hidden; border-radius: 999px; background: #edf0f4; } ._resourceProgressFill_1fb7a_1017 { height: 100%; min-width: 2px; border-radius: inherit; background: #5b7cfa; transition: width 0.3s ease; } ._resourceProgressRow_1fb7a_989 > span { min-width: 27px; color: #64748b; font-size: 9px; line-height: 13px; font-weight: 600; text-align: right; } ._resourceRemaining_1fb7a_1051 { display: block; margin-top: 6px; color: #8a94a6; font-size: 9px; line-height: 13px; } /* ============================================================ QUICK ACTIONS ============================================================ */ ._quickActions_1fb7a_1075 { min-height: 90px; padding: 10px 11px; box-sizing: border-box; border: 1px solid #e6eaf0; border-radius: 7px; background: #fbfcfe; } ._quickActions_1fb7a_1075 h3 { margin: 0 0 6px; color: #334155; font-size: 10px; line-height: 15px; font-weight: 700; } ._quickActions_1fb7a_1075 button { width: 100%; min-height: 22px; display: flex; align-items: center; gap: 5px; padding: 2px 0; border: 0; background: transparent; color: #64748b; font-size: 9px; line-height: 14px; font-weight: 500; text-align: left; cursor: pointer; transition: color 0.2s ease; } ._quickActions_1fb7a_1075 button svg:first-child { flex: 0 0 auto; font-size: 11px; } ._quickActions_1fb7a_1075 button svg:last-child { margin-left: auto; flex: 0 0 auto; color: #a0a9b7; font-size: 10px; } ._quickActions_1fb7a_1075 button:hover { color: #2563eb; } /* ============================================================ LOWER GRID ============================================================ */ ._lowerGrid_1fb7a_1185 { display: grid; grid-template-columns: minmax(0, 1.2fr) minmax(0, 0.8fr); gap: 10px; margin-top: 14px; } /* ============================================================ TRENDS CARD ============================================================ */ ._trendsCard_1fb7a_1207, ._ledgerCard_1fb7a_1209 { min-width: 0; overflow: hidden; border: 1px solid #e6eaf0; border-radius: 7px; background: #ffffff; } ._cardHeader_1fb7a_1225 { min-height: 48px; display: flex; align-items: center; justify-content: space-between; gap: 10px; padding: 8px 11px; box-sizing: border-box; border-bottom: 1px solid #edf0f4; } ._cardHeader_1fb7a_1225 h3 { margin: 0; color: #293548; font-size: 10px; line-height: 15px; font-weight: 700; } /* ============================================================ CHART LEGEND ============================================================ */ ._chartLegend_1fb7a_1271 { display: flex; align-items: center; flex-wrap: wrap; gap: 8px; margin-top: 4px; } ._chartLegend_1fb7a_1271 span { display: inline-flex; align-items: center; gap: 4px; color: #8a94a6; font-size: 8px; line-height: 12px; } ._chartLegend_1fb7a_1271 i { width: 6px; height: 6px; display: inline-block; border-radius: 50%; } ._legendEmail_1fb7a_1319 { background: #6366f1; } ._legendSms_1fb7a_1327 { background: #22c55e; } ._legendWhatsApp_1fb7a_1335 { background: #06b6d4; } ._legendVoice_1fb7a_1343 { background: #f59e0b; } /* ============================================================ CHART SELECT ============================================================ */ ._chartSelect_1fb7a_1359 { height: 27px; min-width: 70px; padding: 0 7px; border: 1px solid #dfe4eb; border-radius: 5px; outline: none; background: #ffffff; color: #64748b; font-family: inherit; font-size: 9px; font-weight: 500; cursor: pointer; } ._chartSelect_1fb7a_1359:focus { border-color: #93b4ff; box-shadow: 0 0 0 2px rgba(37, 99, 235, 0.08); } /* ============================================================ CHART ============================================================ */ ._chartWrapper_1fb7a_1407 { width: 100%; height: 200px; padding: 6px 9px 0; box-sizing: border-box; overflow: hidden; } ._usageChart_1fb7a_1423 { width: 100%; height: 100%; display: block; overflow: visible; } ._chartGridLine_1fb7a_1437 { stroke: #edf0f4; stroke-width: 1; vector-effect: non-scaling-stroke; } ._chartLineEmail_1fb7a_1449, ._chartLineSms_1fb7a_1451, ._chartLineWhatsApp_1fb7a_1453, ._chartLineVoice_1fb7a_1455 { fill: none; stroke-width: 2; stroke-linecap: round; stroke-linejoin: round; vector-effect: non-scaling-stroke; } ._chartLineEmail_1fb7a_1449 { stroke: #6366f1; } ._chartLineSms_1fb7a_1451 { stroke: #22c55e; } ._chartLineWhatsApp_1fb7a_1453 { stroke: #06b6d4; } ._chartLineVoice_1fb7a_1455 { stroke: #f59e0b; } ._chartLabel_1fb7a_1503 { fill: #9aa3b2; font-family: inherit; font-size: 8px; } ._chartFooter_1fb7a_1515 { display: block; padding: 0 11px 9px; color: #a0a8b6; font-size: 8px; line-height: 12px; } /* ============================================================ LEDGER ============================================================ */ ._ledgerCard_1fb7a_1209 ._cardHeader_1fb7a_1225 { min-height: 48px; } ._ledgerCard_1fb7a_1209 ._cardHeader_1fb7a_1225 button { padding: 0; border: 0; background: transparent; color: #2563eb; font-family: inherit; font-size: 9px; font-weight: 600; cursor: pointer; } ._ledgerCard_1fb7a_1209 ._cardHeader_1fb7a_1225 button:hover { text-decoration: underline; } /* ============================================================ LEDGER TABLE ============================================================ */ ._ledgerTableWrapper_1fb7a_1585 { width: 100%; overflow-x: auto; } ._ledgerTable_1fb7a_1585 { width: 100%; min-width: 520px; border-collapse: collapse; table-layout: auto; } ._ledgerTable_1fb7a_1585 th { padding: 7px 8px; border-bottom: 1px solid #edf0f4; background: #fbfcfe; color: #8993a3; font-size: 8px; line-height: 12px; font-weight: 700; text-align: left; white-space: nowrap; } ._ledgerTable_1fb7a_1585 td { padding: 8px; border-bottom: 1px solid #f0f2f5; color: #526174; font-size: 8px; line-height: 12px; font-weight: 500; white-space: nowrap; } ._ledgerTable_1fb7a_1585 tbody tr:last-child td { border-bottom: 0; } ._ledgerTable_1fb7a_1585 tbody tr:hover td { background: #fafcff; } ._ledgerTable_1fb7a_1585 th:nth-child(1), ._ledgerTable_1fb7a_1585 td:nth-child(1) { width: 24%; } ._ledgerTable_1fb7a_1585 th:nth-child(2), ._ledgerTable_1fb7a_1585 td:nth-child(2) { width: 22%; } ._ledgerTable_1fb7a_1585 th:nth-child(3), ._ledgerTable_1fb7a_1585 td:nth-child(3) { width: 17%; text-align: right; } ._ledgerTable_1fb7a_1585 th:nth-child(4), ._ledgerTable_1fb7a_1585 td:nth-child(4) { width: 23%; } ._ledgerTable_1fb7a_1585 th:nth-child(5), ._ledgerTable_1fb7a_1585 td:nth-child(5) { width: 14%; text-align: right; } /* ============================================================ LEDGER PAGINATION ============================================================ */ ._ledgerPagination_1fb7a_1731 { min-height: 38px; display: flex; align-items: center; justify-content: space-between; gap: 8px; padding: 6px 9px; box-sizing: border-box; border-top: 1px solid #edf0f4; } ._ledgerPagination_1fb7a_1731 > span { color: #929baa; font-size: 8px; line-height: 12px; } ._ledgerPagination_1fb7a_1731 > div { display: flex; align-items: center; gap: 2px; } ._ledgerPagination_1fb7a_1731 button { width: 22px; height: 22px; display: inline-flex; align-items: center; justify-content: center; padding: 0; border: 1px solid #e0e5ec; border-radius: 4px; background: #ffffff; color: #7b8798; font-size: 9px; font-weight: 600; cursor: pointer; transition: background 0.2s ease, border-color 0.2s ease, color 0.2s ease; } ._ledgerPagination_1fb7a_1731 button:hover { border-color: #cbd5e1; background: #f8fafc; color: #2563eb; } ._ledgerPagination_1fb7a_1731 ._pageButtonActive_1fb7a_1829 { border-color: #2563eb; background: #2563eb; color: #ffffff; } ._ledgerPagination_1fb7a_1731 ._pageButtonActive_1fb7a_1829:hover { border-color: #1d4ed8; background: #1d4ed8; color: #ffffff; } /* ============================================================ TAB PLACEHOLDER ============================================================ */ ._tabPlaceholder_1fb7a_1861 { min-height: 300px; display: flex; flex-direction: column; align-items: center; justify-content: center; padding: 30px 15px; box-sizing: border-box; color: #94a3b8; text-align: center; } ._tabPlaceholder_1fb7a_1861 > svg { margin-bottom: 9px; color: #94a3b8; } ._tabPlaceholder_1fb7a_1861 h3 { margin: 0; color: #475569; font-size: 12px; line-height: 18px; font-weight: 700; } ._tabPlaceholder_1fb7a_1861 p { margin: 4px 0 0; color: #94a3b8; font-size: 9px; line-height: 15px; } /* ============================================================ RESPONSIVE - LARGE TABLET ============================================================ */ @media (max-width: 1200px) { ._usageDetailsPage_1fb7a_9 { padding: 18px 20px 28px; } ._detailInfoGrid_1fb7a_277 { grid-template-columns: repeat(2, minmax(0, 1fr)); } ._resourceGrid_1fb7a_837 { grid-template-columns: repeat(3, minmax(0, 1fr)); } ._lowerGrid_1fb7a_1185 { grid-template-columns: 1fr; } } /* ============================================================ RESPONSIVE - TABLET ============================================================ */ @media (max-width: 900px) { ._usageDetailsPage_1fb7a_9 { padding: 16px 16px 25px; } ._detailsTopBar_1fb7a_35 { flex-direction: column; align-items: stretch; } ._headerActions_1fb7a_151 { justify-content: flex-start; } ._resourceGrid_1fb7a_837 { grid-template-columns: repeat(2, minmax(0, 1fr)); } ._organizationOverview_1fb7a_633 { align-items: flex-start; flex-wrap: wrap; } ._organizationOverview_1fb7a_633 > div:nth-child(2) { min-width: calc(100% - 50px); } ._viewOrganizationButton_1fb7a_775 { margin-left: 46px; } } /* ============================================================ RESPONSIVE - MOBILE ============================================================ */ @media (max-width: 640px) { ._usageDetailsPage_1fb7a_9 { padding: 13px 11px 22px; } ._pageTitle_1fb7a_111 { font-size: 19px; line-height: 25px; } ._pageSubtitle_1fb7a_129 { font-size: 10px; } ._detailInfoGrid_1fb7a_277 { grid-template-columns: 1fr; gap: 8px; } ._detailInfoCard_1fb7a_291 { min-height: 72px; } ._headerActions_1fb7a_151 { width: 100%; display: grid; grid-template-columns: 1fr 1fr; } ._headerActions_1fb7a_151 ._primaryButton_1fb7a_169 { grid-column: 1 / -1; } ._secondaryButton_1fb7a_167, ._primaryButton_1fb7a_169 { width: 100%; } ._detailsMainCard_1fb7a_491 { border-radius: 7px; } ._tabs_1fb7a_515 { height: auto; overflow-x: auto; padding: 0 8px; } ._tabs_1fb7a_515 button { min-width: 82px; height: 40px; } ._overviewContent_1fb7a_615 { padding: 11px; } ._organizationOverview_1fb7a_633 { padding: 10px; } ._organizationMeta_1fb7a_753 { flex-direction: column; align-items: flex-start; gap: 1px; } ._organizationMeta_1fb7a_753 span:nth-child(2) { display: none; } ._viewOrganizationButton_1fb7a_775 { width: calc(100% - 46px); margin-left: 46px; } ._resourceGrid_1fb7a_837 { grid-template-columns: 1fr; } ._lowerGrid_1fb7a_1185 { grid-template-columns: 1fr; } ._cardHeader_1fb7a_1225 { align-items: flex-start; } ._chartWrapper_1fb7a_1407 { height: 180px; padding-left: 4px; padding-right: 4px; } ._chartLegend_1fb7a_1271 { gap: 6px; } ._chartSelect_1fb7a_1359 { flex: 0 0 auto; } ._ledgerTableWrapper_1fb7a_1585 { overflow-x: auto; } } /* ============================================================ RESPONSIVE - SMALL MOBILE ============================================================ */ @media (max-width: 420px) { ._usageDetailsPage_1fb7a_9 { padding: 11px 8px 20px; } ._headerActions_1fb7a_151 { grid-template-columns: 1fr; } ._headerActions_1fb7a_151 ._primaryButton_1fb7a_169 { grid-column: auto; } ._tabs_1fb7a_515 button { min-width: 75px; padding: 0 7px; font-size: 9px; } ._overviewContent_1fb7a_615 { padding: 9px; } ._organizationOverview_1fb7a_633 { gap: 8px; } ._organizationAvatarLarge_1fb7a_659 { width: 34px; height: 34px; flex-basis: 34px; } ._organizationOverview_1fb7a_633 > div:nth-child(2) { min-width: calc(100% - 45px); } ._viewOrganizationButton_1fb7a_775 { width: 100%; margin-left: 0; } ._cardHeader_1fb7a_1225 { flex-direction: column; align-items: flex-start; } ._chartSelect_1fb7a_1359 { width: 100%; } ._chartWrapper_1fb7a_1407 { height: 170px; } } /* ============================================================ ACCESSIBILITY ============================================================ */ ._secondaryButton_1fb7a_167:focus-visible, ._primaryButton_1fb7a_169:focus-visible, ._viewOrganizationButton_1fb7a_775:focus-visible, ._tabs_1fb7a_515 button:focus-visible, ._quickActions_1fb7a_1075 button:focus-visible, ._ledgerPagination_1fb7a_1731 button:focus-visible, ._chartSelect_1fb7a_1359:focus-visible { outline: 2px solid #2563eb; outline-offset: 2px; } /* ============================================================ REDUCED MOTION ============================================================ */ @media (prefers-reduced-motion: reduce) { ._secondaryButton_1fb7a_167, ._primaryButton_1fb7a_169, ._viewOrganizationButton_1fb7a_775, ._tabs_1fb7a_515 button, ._resourceCard_1fb7a_857, ._quickActions_1fb7a_1075 button, ._ledgerPagination_1fb7a_1731 button, ._resourceProgressFill_1fb7a_1017 { transition: none; } } /* ============================================================ USAGE CREATE PAGE ============================================================ */ ._usageCreatePage_172a0_9 { width: 100%; min-height: 100%; padding: 20px 24px 30px; box-sizing: border-box; background: #f8fafc; color: #172033; } /* ============================================================ PAGE HEADER ============================================================ */ ._createPageHeader_172a0_35 { display: flex; align-items: flex-end; justify-content: space-between; gap: 18px; margin-bottom: 18px; } ._createPageHeader_172a0_35 > div:first-child { min-width: 0; } ._breadcrumb_172a0_59 { display: flex; align-items: center; flex-wrap: wrap; gap: 6px; margin-bottom: 6px; color: #8a94a6; font-size: 10px; font-weight: 500; } ._breadcrumb_172a0_59 button { padding: 0; border: 0; background: transparent; color: #64748b; font: inherit; cursor: pointer; transition: color 0.2s ease; } ._breadcrumb_172a0_59 button:hover { color: #2563eb; } ._breadcrumb_172a0_59 span:last-child { color: #334155; font-weight: 600; } ._pageTitle_172a0_119 { margin: 0; color: #172033; font-size: 23px; line-height: 1.2; font-weight: 700; letter-spacing: -0.02em; } ._pageSubtitle_172a0_137 { margin: 5px 0 0; color: #7b8798; font-size: 11px; line-height: 1.4; } ._headerActions_172a0_151 { display: flex; align-items: center; justify-content: flex-end; gap: 8px; flex-shrink: 0; } /* ============================================================ COMMON BUTTONS ============================================================ */ ._primaryButton_172a0_175, ._secondaryButton_172a0_177, ._confirmButton_172a0_179, ._cancelBottomButton_172a0_181 { display: inline-flex; align-items: center; justify-content: center; gap: 6px; min-height: 36px; padding: 0 13px; border-radius: 6px; font-family: inherit; font-size: 11px; font-weight: 600; line-height: 1; cursor: pointer; transition: background-color 0.2s ease, border-color 0.2s ease, box-shadow 0.2s ease, color 0.2s ease, transform 0.15s ease; } ._primaryButton_172a0_175 { border: 1px solid #2563eb; background: #2563eb; color: #ffffff; box-shadow: 0 1px 2px rgba(37, 99, 235, 0.12); } ._primaryButton_172a0_175:hover:not(:disabled) { background: #1d4ed8; border-color: #1d4ed8; } ._primaryButton_172a0_175:active:not(:disabled), ._confirmButton_172a0_179:active:not(:disabled) { transform: translateY(1px); } ._primaryButton_172a0_175:disabled, ._confirmButton_172a0_179:disabled { opacity: 0.6; cursor: not-allowed; } ._secondaryButton_172a0_177 { border: 1px solid #d8dee8; background: #ffffff; color: #475569; } ._secondaryButton_172a0_177:hover { border-color: #c3ccd9; background: #f8fafc; color: #1e293b; } /* ============================================================ CREATE SECTION ============================================================ */ ._createSection_172a0_311 { margin-bottom: 14px; padding: 16px 18px 18px; border: 1px solid #e3e8ef; border-radius: 8px; background: #ffffff; box-shadow: 0 1px 2px rgba(15, 23, 42, 0.025); } /* ============================================================ SECTION HEADER ============================================================ */ ._createSectionHeader_172a0_343 { display: flex; align-items: center; gap: 7px; margin-bottom: 15px; color: #172033; font-size: 12px; } ._createSectionHeader_172a0_343 > span:not(._createSectionIcon_172a0_365) { color: #7c8798; font-size: 11px; font-weight: 600; } ._createSectionHeader_172a0_343 strong { color: #1e293b; font-size: 12px; font-weight: 700; } ._createSectionIcon_172a0_365 { display: inline-flex; align-items: center; justify-content: center; width: 26px; height: 26px; flex-shrink: 0; border-radius: 6px; background: #eff6ff; color: #2563eb; font-size: 13px; } /* ============================================================ FORM FIELD ============================================================ */ ._createField_172a0_431 { min-width: 0; } ._createField_172a0_431 > label { display: block; margin-bottom: 5px; color: #475569; font-size: 10px; font-weight: 600; line-height: 1.35; } ._requiredMark_172a0_461 { margin-left: 2px; color: #ef4444; font-weight: 700; } /* ============================================================ ORGANIZATION FORM ============================================================ */ ._organizationFormGrid_172a0_481 { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 14px 16px; } /* ============================================================ SELECT ============================================================ */ ._createSelectWrapper_172a0_501 { position: relative; width: 100%; } ._createSelectWrapper_172a0_501 select { width: 100%; height: 36px; padding: 0 32px 0 10px; border: 1px solid #d9e0e8; border-radius: 6px; outline: none; background: #ffffff; color: #1e293b; font-family: inherit; font-size: 11px; font-weight: 500; appearance: none; -webkit-appearance: none; cursor: pointer; transition: border-color 0.2s ease, box-shadow 0.2s ease; } ._createSelectWrapper_172a0_501 select:hover { border-color: #c5ceda; } ._createSelectWrapper_172a0_501 select:focus { border-color: #3b82f6; box-shadow: 0 0 0 2px rgba(59, 130, 246, 0.1); } ._createSelectWrapper_172a0_501 > svg { position: absolute; top: 50%; right: 10px; width: 13px; height: 13px; color: #7b8798; pointer-events: none; transform: translateY(-50%); } /* ============================================================ COMMON INPUTS ============================================================ */ ._createField_172a0_431 input:not([type="radio"]):not([type="checkbox"]) { width: 100%; height: 36px; box-sizing: border-box; padding: 0 10px; border: 1px solid #d9e0e8; border-radius: 6px; outline: none; background: #ffffff; color: #1e293b; font-family: inherit; font-size: 11px; font-weight: 500; transition: border-color 0.2s ease, box-shadow 0.2s ease, background-color 0.2s ease; } ._createField_172a0_431 input:not([type="radio"]):not([type="checkbox"]):hover { border-color: #c5ceda; } ._createField_172a0_431 input:not([type="radio"]):not([type="checkbox"]):focus { border-color: #3b82f6; box-shadow: 0 0 0 2px rgba(59, 130, 246, 0.1); } ._createField_172a0_431 input[readonly] { background: #f8fafc; color: #64748b; cursor: default; } ._createField_172a0_431 input::placeholder { color: #a1aab8; } /* ============================================================ REMOVE NUMBER ARROWS ============================================================ */ ._createField_172a0_431 input[type="number"]::-webkit-inner-spin-button, ._createField_172a0_431 input[type="number"]::-webkit-outer-spin-button { margin: 0; appearance: none; } ._createField_172a0_431 input[type="number"] { appearance: textfield; -moz-appearance: textfield; } /* ============================================================ READONLY BADGES ============================================================ */ ._readonlyBadge_172a0_753 { display: inline-flex; align-items: center; min-height: 36px; box-sizing: border-box; padding: 0 10px; border: 1px solid #e1e6ed; border-radius: 6px; background: #f8fafc; color: #475569; font-size: 11px; font-weight: 600; } ._readonlyDate_172a0_793 { display: flex; align-items: center; gap: 6px; min-height: 36px; box-sizing: border-box; padding: 0 10px; border: 1px solid #e1e6ed; border-radius: 6px; background: #f8fafc; color: #475569; font-size: 11px; font-weight: 500; } ._readonlyDate_172a0_793 svg { flex-shrink: 0; width: 13px; height: 13px; color: #64748b; } /* ============================================================ STATUS ============================================================ */ ._statusActive_172a0_861, ._statusOverLimit_172a0_863 { display: inline-flex; align-items: center; justify-content: center; min-height: 24px; padding: 0 9px; border-radius: 999px; font-size: 10px; font-weight: 700; } ._statusActive_172a0_861 { border: 1px solid #bbf7d0; background: #f0fdf4; color: #15803d; } ._statusOverLimit_172a0_863 { border: 1px solid #fecaca; background: #fef2f2; color: #dc2626; } /* ============================================================ RESOURCE SELECT ============================================================ */ ._resourceSelectGrid_172a0_925 { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 9px; } ._resourceSelectCard_172a0_937 { position: relative; display: flex; align-items: center; min-height: 52px; gap: 8px; padding: 8px 10px; border: 1px solid #dfe5ed; border-radius: 7px; outline: none; background: #ffffff; color: #334155; text-align: left; font-family: inherit; cursor: pointer; transition: border-color 0.2s ease, background-color 0.2s ease, box-shadow 0.2s ease, transform 0.15s ease; } ._resourceSelectCard_172a0_937:hover { border-color: #bfdbfe; background: #f8fbff; } ._resourceSelectCard_172a0_937:active { transform: translateY(1px); } ._resourceSelectCardActive_172a0_1019 { border-color: #3b82f6; background: #eff6ff; box-shadow: 0 0 0 1px rgba(59, 130, 246, 0.08); } ._resourceRadio_172a0_1031 { display: inline-flex; align-items: center; justify-content: center; width: 15px; height: 15px; flex-shrink: 0; box-sizing: border-box; border: 1.5px solid #cbd5e1; border-radius: 50%; background: #ffffff; color: #ffffff; } ._resourceSelectCardActive_172a0_1019 ._resourceRadio_172a0_1031 { border-color: #2563eb; background: #2563eb; } ._createResourceIcon_172a0_1077 { display: inline-flex; align-items: center; justify-content: center; width: 27px; height: 27px; flex-shrink: 0; border-radius: 6px; background: #f1f5f9; color: #475569; font-size: 13px; } ._resourceSelectCardActive_172a0_1019 ._createResourceIcon_172a0_1077 { background: #dbeafe; color: #2563eb; } ._createResourceLabel_172a0_1121 { min-width: 0; color: #334155; font-size: 10px; font-weight: 600; line-height: 1.3; } /* ============================================================ CREDIT DETAILS ============================================================ */ ._creditTopGrid_172a0_1149 { display: grid; grid-template-columns: repeat(6, minmax(0, 1fr)); gap: 14px 12px; } ._creditBottomGrid_172a0_1161 { display: grid; grid-template-columns: 1fr 1fr 2fr; gap: 14px 16px; margin-top: 14px; } /* ============================================================ INPUT WITH INFO ============================================================ */ ._inputWithInfo_172a0_1187 { position: relative; width: 100%; } ._inputWithInfo_172a0_1187 input { padding-right: 32px !important; } ._inputWithInfo_172a0_1187 > span { position: absolute; top: 50%; right: 10px; color: #94a3b8; font-size: 11px; line-height: 1; transform: translateY(-50%); cursor: help; } /* ============================================================ DATE INPUT ============================================================ */ ._dateInput_172a0_1245 { position: relative; display: flex; align-items: center; width: 100%; } ._dateInput_172a0_1245 > svg { position: absolute; left: 10px; z-index: 1; width: 13px; height: 13px; color: #64748b; pointer-events: none; } ._dateInput_172a0_1245 input { padding-left: 31px !important; } /* ============================================================ RADIO GROUP ============================================================ */ ._radioGroup_172a0_1307 { display: flex; align-items: center; flex-wrap: wrap; gap: 8px 15px; min-height: 36px; } ._radioOption_172a0_1327 { display: inline-flex; align-items: center; gap: 5px; color: #475569; font-size: 10px; font-weight: 500; cursor: pointer; white-space: nowrap; } ._radioOption_172a0_1327 input[type="radio"] { width: 13px; height: 13px; margin: 0; accent-color: #2563eb; cursor: pointer; } /* ============================================================ PAYMENT & APPROVAL ============================================================ */ ._paymentApprovalGrid_172a0_1387 { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 14px 16px; } /* ============================================================ SUMMARY ============================================================ */ ._summaryGrid_172a0_1409 { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 10px; } ._newSummaryCard_172a0_1423 { display: flex; align-items: flex-start; gap: 9px; min-width: 0; padding: 12px; border: 1px solid #e4e8ee; border-radius: 7px; background: #ffffff; } ._newSummaryIcon_172a0_1455 { display: inline-flex; align-items: center; justify-content: center; width: 30px; height: 30px; flex-shrink: 0; border-radius: 6px; font-size: 14px; font-weight: 700; } ._summaryPurple_172a0_1485 { background: #f3e8ff; color: #9333ea; } ._summaryGreen_172a0_1495 { background: #dcfce7; color: #16a34a; } ._summaryBlue_172a0_1505 { background: #dbeafe; color: #2563eb; } ._summaryOrange_172a0_1515 { background: #ffedd5; color: #ea580c; } ._newSummaryCard_172a0_1423 > div:last-child { display: flex; flex-direction: column; min-width: 0; } ._newSummaryCard_172a0_1423 span { margin-bottom: 3px; color: #8a94a6; font-size: 9px; font-weight: 700; letter-spacing: 0.05em; line-height: 1.25; } ._newSummaryCard_172a0_1423 strong { color: #172033; font-size: 16px; font-weight: 700; line-height: 1.25; word-break: break-word; } ._newSummaryCard_172a0_1423 small { margin-top: 3px; color: #8a94a6; font-size: 9px; line-height: 1.3; } /* ============================================================ BOTTOM ACTIONS ============================================================ */ ._createBottomActions_172a0_1611 { display: flex; align-items: center; justify-content: flex-end; gap: 8px; margin-top: 18px; padding: 14px 0 0; border-top: 1px solid #e3e8ef; } ._cancelBottomButton_172a0_181 { min-width: 76px; border: 1px solid #d8dee8; background: #ffffff; color: #475569; } ._cancelBottomButton_172a0_181:hover { border-color: #c3ccd9; background: #f8fafc; } ._confirmButton_172a0_179 { min-width: 170px; border: 1px solid #2563eb; background: #2563eb; color: #ffffff; box-shadow: 0 1px 2px rgba(37, 99, 235, 0.12); } ._confirmButton_172a0_179:hover:not(:disabled) { border-color: #1d4ed8; background: #1d4ed8; } /* ============================================================ RESPONSIVE - LARGE TABLET ============================================================ */ @media (max-width: 1200px) { ._usageCreatePage_172a0_9 { padding: 18px 20px 28px; } ._organizationFormGrid_172a0_481 { grid-template-columns: repeat(3, minmax(0, 1fr)); } ._resourceSelectGrid_172a0_925 { grid-template-columns: repeat(3, minmax(0, 1fr)); } ._creditTopGrid_172a0_1149 { grid-template-columns: repeat(3, minmax(0, 1fr)); } ._summaryGrid_172a0_1409 { grid-template-columns: repeat(2, minmax(0, 1fr)); } } /* ============================================================ RESPONSIVE - TABLET ============================================================ */ @media (max-width: 900px) { ._createPageHeader_172a0_35 { align-items: flex-start; flex-direction: column; } ._headerActions_172a0_151 { width: 100%; justify-content: flex-start; } ._organizationFormGrid_172a0_481 { grid-template-columns: repeat(2, minmax(0, 1fr)); } ._resourceSelectGrid_172a0_925 { grid-template-columns: repeat(2, minmax(0, 1fr)); } ._creditBottomGrid_172a0_1161 { grid-template-columns: 1fr 1fr; } ._creditBottomGrid_172a0_1161 ._createField_172a0_431:last-child { grid-column: 1 / -1; } ._paymentApprovalGrid_172a0_1387 { grid-template-columns: 1fr; } } /* ============================================================ RESPONSIVE - MOBILE ============================================================ */ @media (max-width: 640px) { ._usageCreatePage_172a0_9 { padding: 14px 12px 24px; } ._createPageHeader_172a0_35 { margin-bottom: 15px; } ._pageTitle_172a0_119 { font-size: 20px; } ._pageSubtitle_172a0_137 { font-size: 10px; } ._headerActions_172a0_151 { display: grid; grid-template-columns: 1fr 1fr; width: 100%; } ._headerActions_172a0_151 ._primaryButton_172a0_175 { grid-column: 1 / -1; } ._createSection_172a0_311 { padding: 13px; margin-bottom: 11px; border-radius: 7px; } ._createSectionHeader_172a0_343 { margin-bottom: 13px; } ._organizationFormGrid_172a0_481, ._resourceSelectGrid_172a0_925, ._creditTopGrid_172a0_1149, ._creditBottomGrid_172a0_1161, ._paymentApprovalGrid_172a0_1387, ._summaryGrid_172a0_1409 { grid-template-columns: 1fr; } ._creditBottomGrid_172a0_1161 ._createField_172a0_431:last-child { grid-column: auto; } ._resourceSelectCard_172a0_937 { min-height: 48px; } ._radioGroup_172a0_1307 { align-items: flex-start; flex-direction: column; gap: 8px; padding: 3px 0; } ._newSummaryCard_172a0_1423 { padding: 11px; } ._createBottomActions_172a0_1611 { align-items: stretch; flex-direction: column-reverse; } ._cancelBottomButton_172a0_181, ._confirmButton_172a0_179 { width: 100%; } } /* ============================================================ VERY SMALL MOBILE ============================================================ */ @media (max-width: 400px) { ._usageCreatePage_172a0_9 { padding-left: 9px; padding-right: 9px; } ._createSection_172a0_311 { padding: 11px; } ._headerActions_172a0_151 { grid-template-columns: 1fr; } ._headerActions_172a0_151 ._primaryButton_172a0_175 { grid-column: auto; } ._headerActions_172a0_151 button { width: 100%; } ._breadcrumb_172a0_59 { font-size: 10px; } ._pageTitle_172a0_119 { font-size: 19px; } } /* ============================================================ ACCESSIBILITY ============================================================ */ ._primaryButton_172a0_175:focus-visible, ._secondaryButton_172a0_177:focus-visible, ._confirmButton_172a0_179:focus-visible, ._cancelBottomButton_172a0_181:focus-visible, ._resourceSelectCard_172a0_937:focus-visible, ._createField_172a0_431 input:focus-visible, ._createSelectWrapper_172a0_501 select:focus-visible, ._radioOption_172a0_1327 input:focus-visible { outline: 2px solid #2563eb; outline-offset: 2px; } /* ============================================================ REDUCED MOTION ============================================================ */ @media (prefers-reduced-motion: reduce) { ._primaryButton_172a0_175, ._secondaryButton_172a0_177, ._confirmButton_172a0_179, ._cancelBottomButton_172a0_181, ._resourceSelectCard_172a0_937, ._createSelectWrapper_172a0_501 select, ._createField_172a0_431 input { transition: none; } } ._loginPage_yniqj_1 { height: 100vh; display: flex; align-items: center; justify-content: center; padding: 40px; box-sizing: border-box; background: radial-gradient(circle at 85% 10%, rgba(255, 196, 92, 0.55) 0%, rgba(255, 196, 92, 0) 45%), radial-gradient(circle at 8% 95%, rgba(80, 140, 255, 0.35) 0%, rgba(80, 140, 255, 0) 45%), #fbfbfa; overflow: hidden; } ._loginShell_yniqj_29 { width: 100%; max-width: 1400px; display: grid; grid-template-columns: 1.15fr 0.85fr; align-items: center; gap: 48px; height: 100%; max-height: 100vh; } /* ---------- Left showcase (static image) ---------- */ ._showcasePanel_yniqj_55 { display: flex; align-items: center; justify-content: center; height: 100%; min-height: 0; } ._showcaseImage_yniqj_71 { width: 100%; height: auto; max-height: 85vh; object-fit: contain; display: block; -webkit-mask-image: linear-gradient(to right, transparent 0%, #000 12%, #000 88%, transparent 100%), linear-gradient(to bottom, transparent 0%, #000 10%, #000 90%, transparent 100%); -webkit-mask-composite: source-in; mask-image: linear-gradient(to right, transparent 0%, #000 12%, #000 88%, transparent 100%), linear-gradient(to bottom, transparent 0%, #000 10%, #000 90%, transparent 100%); mask-composite: intersect; } /* ---------- Form panel ---------- */ ._formPanel_yniqj_135 { display: flex; justify-content: center; align-items: center; height: 100%; } ._loginCard_yniqj_149 { width: 100%; max-width: 470px; padding: 40px; box-sizing: border-box; background: #fff; border-radius: 20px; box-shadow: 0 20px 50px rgba(20, 30, 60, 0.12); } ._brand_yniqj_169 { width: 100%; display: flex; justify-content: center; align-items: center; margin-bottom: 24px; } ._mainLogo_yniqj_185 { width: 220px; height: auto; max-width: 100%; object-fit: contain; display: block; } ._heading_yniqj_201 { margin: 0 0 6px; font-size: 28px; font-weight: 800; color: #16223e; } ._subheading_yniqj_215 { margin: 0 0 24px; color: #7b8aa3; font-size: 14px; } ._loginForm_yniqj_227 { display: flex; flex-direction: column; } ._fieldGroup_yniqj_237 { margin-bottom: 16px; } ._fieldGroup_yniqj_237 label { display: block; margin-bottom: 7px; font-size: 13px; font-weight: 600; color: #465979; } ._inputWrapper_yniqj_261 { position: relative; display: flex; align-items: center; } ._inputIcon_yniqj_273 { position: absolute; left: 14px; color: #9aa6ba; font-size: 16px; } ._input_yniqj_261 { width: 100%; box-sizing: border-box; min-height: 46px; padding: 0 42px; border: 1px solid #dfe4ec; border-radius: 8px; background: #fff; color: #16223e; font-size: 14px; outline: 0; } ._input_yniqj_261:focus { border-color: #2f6fed; box-shadow: 0 0 0 3px rgba(47, 111, 237, 0.12); } ._passwordToggle_yniqj_323 { position: absolute; right: 14px; border: 0; background: transparent; color: #9aa6ba; cursor: pointer; font-size: 17px; display: flex; align-items: center; } ._passwordToggle_yniqj_323:hover { color: #2f6fed; } ._error_yniqj_355 { display: block; margin-top: 4px; color: #e5484d; font-size: 11px; } ._rowBetween_yniqj_369 { display: flex; align-items: center; justify-content: space-between; margin: 4px 0 20px; } ._rememberMe_yniqj_383 { display: flex; align-items: center; gap: 7px; font-size: 13px; color: #465979; cursor: pointer; } ._rememberMe_yniqj_383 input { width: 15px; height: 15px; accent-color: #2f6fed; } ._forgotLink_yniqj_413 { border: 0; background: transparent; color: #2f6fed; font-size: 13px; font-weight: 600; cursor: pointer; padding: 0; } ._primaryButton_yniqj_433 { width: 100%; min-height: 48px; border: 0; border-radius: 8px; background: #2f6fed; color: #fff; font-weight: 700; font-size: 15px; cursor: pointer; display: flex; align-items: center; justify-content: center; gap: 8px; } ._primaryButton_yniqj_433:hover { background: #255bd1; } ._primaryButton_yniqj_433:disabled { opacity: 0.7; cursor: wait; } ._spinner_yniqj_483 { width: 14px; height: 14px; border: 2px solid rgba(255, 255, 255, 0.4); border-top-color: #fff; border-radius: 50%; animation: _spin_yniqj_483 0.65s linear infinite; } @keyframes _spin_yniqj_483 { to { transform: rotate(360deg); } } ._orDivider_yniqj_513 { display: flex; align-items: center; gap: 12px; margin: 20px 0; color: #9aa6ba; font-size: 11px; font-weight: 600; } ._orDivider_yniqj_513::before, ._orDivider_yniqj_513::after { content: ""; flex: 1; height: 1px; background: #e6eaf1; } ._googleButton_yniqj_549 { display: flex; align-items: center; justify-content: center; gap: 10px; width: 100%; min-height: 46px; border: 1px solid #dfe4ec; border-radius: 8px; background: #fff; color: #16223e; font-size: 14px; font-weight: 600; cursor: pointer; } ._googleButton_yniqj_549:hover { background: #f7f9fc; } ._signupText_yniqj_589 { margin: 24px 0 0; text-align: center; font-size: 13px; color: #5d6d88; } ._signupText_yniqj_589 button { border: 0; background: transparent; color: #2f6fed; font-weight: 700; cursor: pointer; padding: 0; } /* ---------- Height-based Responsive Adjustments ---------- */ @media (max-height: 800px) { ._loginCard_yniqj_149 { padding: 30px 35px; } ._brand_yniqj_169 { margin-bottom: 20px; } ._mainLogo_yniqj_185 { width: 180px; } ._heading_yniqj_201 { font-size: 24px; margin-bottom: 4px; } ._subheading_yniqj_215 { font-size: 13px; margin-bottom: 18px; } ._fieldGroup_yniqj_237 { margin-bottom: 12px; } ._fieldGroup_yniqj_237 label { font-size: 12px; margin-bottom: 5px; } ._input_yniqj_261 { min-height: 40px; font-size: 13px; padding: 0 38px; } ._rowBetween_yniqj_369 { margin: 2px 0 16px; } ._primaryButton_yniqj_433 { min-height: 42px; font-size: 14px; } ._orDivider_yniqj_513 { margin: 16px 0; } ._googleButton_yniqj_549 { min-height: 40px; font-size: 13px; } ._signupText_yniqj_589 { margin: 18px 0 0; font-size: 12px; } } @media (max-height: 650px) { ._loginCard_yniqj_149 { padding: 20px 30px; } ._brand_yniqj_169 { margin-bottom: 14px; } ._mainLogo_yniqj_185 { width: 150px; } ._heading_yniqj_201 { font-size: 20px; margin-bottom: 2px; } ._subheading_yniqj_215 { font-size: 12px; margin-bottom: 14px; } ._fieldGroup_yniqj_237 { margin-bottom: 8px; } ._fieldGroup_yniqj_237 label { font-size: 11px; margin-bottom: 4px; } ._input_yniqj_261 { min-height: 34px; font-size: 12px; padding: 0 34px; } ._inputIcon_yniqj_273 { font-size: 14px; left: 12px; } ._passwordToggle_yniqj_323 { font-size: 14px; right: 12px; } ._rowBetween_yniqj_369 { margin: 0 0 12px; } ._rememberMe_yniqj_383 { font-size: 12px; } ._forgotLink_yniqj_413 { font-size: 12px; } ._primaryButton_yniqj_433 { min-height: 36px; font-size: 13px; } ._orDivider_yniqj_513 { margin: 12px 0; font-size: 10px; } ._googleButton_yniqj_549 { min-height: 36px; font-size: 12px; } ._signupText_yniqj_589 { margin: 14px 0 0; font-size: 11px; } ._error_yniqj_355 { font-size: 10px; } } @media (max-height: 550px) { ._loginCard_yniqj_149 { padding: 14px 24px; border-radius: 14px; } ._brand_yniqj_169 { margin-bottom: 10px; } ._mainLogo_yniqj_185 { width: 120px; } ._heading_yniqj_201 { font-size: 17px; margin-bottom: 1px; } ._subheading_yniqj_215 { font-size: 11px; margin-bottom: 10px; } ._fieldGroup_yniqj_237 { margin-bottom: 6px; } ._fieldGroup_yniqj_237 label { font-size: 10px; margin-bottom: 3px; } ._input_yniqj_261 { min-height: 30px; font-size: 11px; padding: 0 30px; border-radius: 6px; } ._inputIcon_yniqj_273 { font-size: 12px; left: 10px; } ._passwordToggle_yniqj_323 { font-size: 12px; right: 10px; } ._rowBetween_yniqj_369 { margin: 0 0 10px; } ._rememberMe_yniqj_383 { font-size: 11px; } ._rememberMe_yniqj_383 input { width: 13px; height: 13px; } ._forgotLink_yniqj_413 { font-size: 11px; } ._primaryButton_yniqj_433 { min-height: 32px; font-size: 12px; border-radius: 6px; } ._orDivider_yniqj_513 { margin: 10px 0; font-size: 9px; } ._googleButton_yniqj_549 { min-height: 32px; font-size: 11px; border-radius: 6px; } ._signupText_yniqj_589 { margin: 12px 0 0; font-size: 10px; } ._error_yniqj_355 { font-size: 9px; margin-top: 2px; } ._spinner_yniqj_483 { width: 12px; height: 12px; } } /* ---------- Width-based Responsive ---------- */ @media (max-width: 1100px) { ._loginShell_yniqj_29 { grid-template-columns: 1fr; height: auto; max-height: none; } ._loginPage_yniqj_1 { overflow-y: auto; height: auto; min-height: 100vh; padding: 20px; } ._showcasePanel_yniqj_55 { display: none; } ._formPanel_yniqj_135 { height: auto; padding: 10px 0; } ._loginCard_yniqj_149 { max-width: 450px; max-height: none; padding: 35px; } } @media (max-width: 768px) { ._loginCard_yniqj_149 { max-width: 100%; padding: 30px 25px; } ._mainLogo_yniqj_185 { width: 180px; } ._heading_yniqj_201 { font-size: 24px; } } @media (max-width: 500px) { ._loginPage_yniqj_1 { padding: 16px; } ._loginCard_yniqj_149 { padding: 26px 20px; border-radius: 16px; } ._mainLogo_yniqj_185 { width: 160px; } ._heading_yniqj_201 { font-size: 22px; } ._subheading_yniqj_215 { font-size: 13px; margin-bottom: 20px; } ._input_yniqj_261 { min-height: 42px; font-size: 13px; } ._primaryButton_yniqj_433 { min-height: 44px; font-size: 14px; } ._googleButton_yniqj_549 { min-height: 42px; font-size: 13px; } }._registerPage_18cfa_1 { height: 100vh; display: flex; align-items: center; justify-content: center; padding: 40px; box-sizing: border-box; background: radial-gradient(circle at 85% 10%, rgba(255, 196, 92, 0.55) 0%, rgba(255, 196, 92, 0) 45%), radial-gradient(circle at 8% 95%, rgba(80, 140, 255, 0.35) 0%, rgba(80, 140, 255, 0) 45%), #fbfbfa; overflow: hidden; } ._brand_18cfa_29 { width: 100%; display: flex; justify-content: center; align-items: center; margin-bottom: 24px; } ._mainLogo_18cfa_45 { width: 220px; height: auto; max-width: 100%; object-fit: contain; display: block; } ._registerShell_18cfa_61 { width: 100%; max-width: 1400px; display: grid; grid-template-columns: 1fr 1.15fr; align-items: center; gap: 48px; height: 100%; max-height: 100vh; } /* ---------- Left showcase (static image) ---------- */ ._showcasePanel_18cfa_87 { display: flex; align-items: center; justify-content: center; height: 100%; min-height: 0; } ._showcaseImage_18cfa_103 { width: 100%; height: auto; max-height: 85vh; object-fit: contain; display: block; -webkit-mask-image: linear-gradient(to right, transparent 0%, #000 12%, #000 88%, transparent 100%), linear-gradient(to bottom, transparent 0%, #000 10%, #000 90%, transparent 100%); -webkit-mask-composite: source-in; mask-image: linear-gradient(to right, transparent 0%, #000 12%, #000 88%, transparent 100%), linear-gradient(to bottom, transparent 0%, #000 10%, #000 90%, transparent 100%); mask-composite: intersect; } /* ---------- Form panel ---------- */ ._formPanel_18cfa_167 { display: flex; justify-content: center; align-items: center; height: 100%; } ._registerCard_18cfa_181 { width: 100%; max-width: 560px; padding: 40px; box-sizing: border-box; background: #fff; border-radius: 20px; box-shadow: 0 20px 50px rgba(20, 30, 60, 0.12); } /* .brand { display: flex; align-items: center; gap: 10px; margin-bottom: 24px; } */ ._brandLogo_18cfa_217 { width: 34px; height: 34px; object-fit: contain; } ._brandName_18cfa_229 { font-size: 22px; font-weight: 800; color: #16223e; } ._heading_18cfa_241 { margin: 0 0 6px; font-size: 26px; font-weight: 800; color: #16223e; } ._subheading_18cfa_255 { margin: 0 0 24px; color: #7b8aa3; font-size: 14px; } ._registerForm_18cfa_267 { display: flex; flex-direction: column; } ._sectionTitle_18cfa_277 { margin: 0 0 14px; font-size: 15px; font-weight: 700; color: #16223e; } ._divider_18cfa_291 { height: 1px; background: #e6eaf1; margin: 6px 0 18px; } ._fieldRow_18cfa_303 { display: grid; grid-template-columns: 1fr 1fr; gap: 16px; } ._fieldGroup_18cfa_315 { margin-bottom: 16px; } ._fieldGroup_18cfa_315 label { display: block; margin-bottom: 7px; font-size: 13px; font-weight: 600; color: #465979; } ._inputWrapper_18cfa_339 { position: relative; display: flex; align-items: center; } ._inputIcon_18cfa_351 { position: absolute; left: 14px; color: #9aa6ba; font-size: 16px; } ._input_18cfa_339 { width: 100%; box-sizing: border-box; min-height: 46px; padding: 0 42px; border: 1px solid #dfe4ec; border-radius: 8px; background: #fff; color: #16223e; font-size: 14px; outline: 0; } ._input_18cfa_339:focus { border-color: #2f6fed; box-shadow: 0 0 0 3px rgba(47, 111, 237, 0.12); } ._passwordToggle_18cfa_401 { position: absolute; right: 14px; border: 0; background: transparent; color: #9aa6ba; cursor: pointer; font-size: 17px; display: flex; align-items: center; } ._passwordToggle_18cfa_401:hover { color: #2f6fed; } ._error_18cfa_433 { display: block; margin-top: 4px; color: #e5484d; font-size: 11px; } ._primaryButton_18cfa_447 { width: 100%; min-height: 48px; margin-top: 8px; border: 0; border-radius: 8px; background: #2f6fed; color: #fff; font-weight: 700; font-size: 15px; cursor: pointer; display: flex; align-items: center; justify-content: center; gap: 8px; } ._primaryButton_18cfa_447:hover { background: #255bd1; } ._primaryButton_18cfa_447:disabled { opacity: 0.7; cursor: wait; } ._spinner_18cfa_499 { width: 14px; height: 14px; border: 2px solid rgba(255, 255, 255, 0.4); border-top-color: #fff; border-radius: 50%; animation: _spin_18cfa_499 0.65s linear infinite; } @keyframes _spin_18cfa_499 { to { transform: rotate(360deg); } } ._signinText_18cfa_529 { margin: 20px 0 0; text-align: center; font-size: 13px; color: #5d6d88; } ._signinText_18cfa_529 button { border: 0; background: transparent; color: #2f6fed; font-weight: 700; cursor: pointer; padding: 0; } /* ---------- Height-based Responsive Adjustments ---------- */ @media (max-height: 900px) { ._registerCard_18cfa_181 { padding: 30px 35px; } ._brand_18cfa_29 { margin-bottom: 16px; } ._brandLogo_18cfa_217 { width: 28px; height: 28px; } ._brandName_18cfa_229 { font-size: 18px; } ._heading_18cfa_241 { font-size: 22px; margin-bottom: 4px; } ._subheading_18cfa_255 { font-size: 13px; margin-bottom: 18px; } ._sectionTitle_18cfa_277 { font-size: 14px; margin-bottom: 10px; } ._fieldGroup_18cfa_315 { margin-bottom: 12px; } ._fieldGroup_18cfa_315 label { font-size: 12px; margin-bottom: 5px; } ._input_18cfa_339 { min-height: 40px; font-size: 13px; padding: 0 38px; } ._divider_18cfa_291 { margin: 4px 0 14px; } ._fieldRow_18cfa_303 { gap: 12px; } ._primaryButton_18cfa_447 { min-height: 42px; font-size: 14px; margin-top: 4px; } ._signinText_18cfa_529 { margin: 16px 0 0; font-size: 12px; } } @media (max-height: 750px) { ._registerCard_18cfa_181 { padding: 20px 30px; } ._brand_18cfa_29 { margin-bottom: 12px; } ._brandLogo_18cfa_217 { width: 24px; height: 24px; } ._brandName_18cfa_229 { font-size: 16px; } ._heading_18cfa_241 { font-size: 19px; margin-bottom: 2px; } ._subheading_18cfa_255 { font-size: 12px; margin-bottom: 14px; } ._sectionTitle_18cfa_277 { font-size: 13px; margin-bottom: 8px; } ._fieldGroup_18cfa_315 { margin-bottom: 8px; } ._fieldGroup_18cfa_315 label { font-size: 11px; margin-bottom: 4px; } ._input_18cfa_339 { min-height: 34px; font-size: 12px; padding: 0 34px; } ._inputIcon_18cfa_351 { font-size: 14px; left: 12px; } ._passwordToggle_18cfa_401 { font-size: 14px; right: 12px; } ._divider_18cfa_291 { margin: 2px 0 10px; } ._fieldRow_18cfa_303 { gap: 10px; } ._primaryButton_18cfa_447 { min-height: 36px; font-size: 13px; margin-top: 2px; } ._signinText_18cfa_529 { margin: 12px 0 0; font-size: 11px; } ._error_18cfa_433 { font-size: 10px; margin-top: 2px; } } @media (max-height: 600px) { ._registerCard_18cfa_181 { padding: 14px 24px; border-radius: 14px; } ._brand_18cfa_29 { margin-bottom: 8px; } ._brandLogo_18cfa_217 { width: 20px; height: 20px; } ._brandName_18cfa_229 { font-size: 14px; } ._heading_18cfa_241 { font-size: 17px; margin-bottom: 1px; } ._subheading_18cfa_255 { font-size: 11px; margin-bottom: 10px; } ._sectionTitle_18cfa_277 { font-size: 12px; margin-bottom: 6px; } ._fieldGroup_18cfa_315 { margin-bottom: 6px; } ._fieldGroup_18cfa_315 label { font-size: 10px; margin-bottom: 3px; } ._input_18cfa_339 { min-height: 30px; font-size: 11px; padding: 0 30px; border-radius: 6px; } ._inputIcon_18cfa_351 { font-size: 12px; left: 10px; } ._passwordToggle_18cfa_401 { font-size: 12px; right: 10px; } ._divider_18cfa_291 { margin: 0 0 8px; } ._fieldRow_18cfa_303 { gap: 8px; } ._primaryButton_18cfa_447 { min-height: 32px; font-size: 12px; border-radius: 6px; margin-top: 0; } ._signinText_18cfa_529 { margin: 10px 0 0; font-size: 10px; } ._error_18cfa_433 { font-size: 9px; margin-top: 2px; } ._spinner_18cfa_499 { width: 12px; height: 12px; } } /* ---------- Width-based Responsive ---------- */ @media (max-width: 1100px) { ._registerShell_18cfa_61 { grid-template-columns: 1fr; height: auto; max-height: none; } ._registerPage_18cfa_1 { overflow-y: auto; height: auto; min-height: 100vh; padding: 20px; } ._showcasePanel_18cfa_87 { display: none; } ._formPanel_18cfa_167 { height: auto; padding: 10px 0; } ._registerCard_18cfa_181 { max-width: 500px; max-height: none; padding: 30px; } } @media (max-width: 768px) { ._registerCard_18cfa_181 { max-width: 100%; padding: 25px; } } @media (max-width: 640px) { ._fieldRow_18cfa_303 { grid-template-columns: 1fr; gap: 0; } ._registerCard_18cfa_181 { padding: 20px; } } @media (max-width: 500px) { ._registerPage_18cfa_1 { padding: 16px; } ._registerCard_18cfa_181 { padding: 20px 16px; border-radius: 16px; } ._heading_18cfa_241 { font-size: 20px; } ._subheading_18cfa_255 { font-size: 12px; margin-bottom: 16px; } ._input_18cfa_339 { min-height: 40px; font-size: 13px; } ._primaryButton_18cfa_447 { min-height: 44px; font-size: 14px; } } @media (max-height: 900px) { ._mainLogo_18cfa_45 { width: 180px; } } @media (max-height: 750px) { ._mainLogo_18cfa_45 { width: 150px; } } @media (max-height: 600px) { ._mainLogo_18cfa_45 { width: 120px; } }/* ====================================================== NOT FOUND PAGE ====================================================== */ ._page_1nmt7_9 { width: 100%; min-height: 100vh; display: flex; align-items: center; justify-content: center; padding: var(--space-6) var(--space-5); background: var(--color-white); } ._content_1nmt7_35 { width: 100%; max-width: 700px; display: flex; flex-direction: column; align-items: center; text-align: center; /* Whole block fades + slides up once on page load. "both" keeps the start state before it plays and the end state after it finishes, so it doesn't snap back. */ animation: _fadeSlideUp_1nmt7_1 0.6s ease-out both; } @keyframes _fadeSlideUp_1nmt7_1 { from { opacity: 0; transform: translateY(18px); } to { opacity: 1; transform: translateY(0); } } /* ====================================================== ERROR CODE ====================================================== */ ._errorCode_1nmt7_97 { margin: 0; color: var(--text-primary-dark); font-size: 106px; font-weight: var(--font-weight-bold); line-height: 0.9; letter-spacing: -3px; } ._color_1nmt7_119 { color: var(--color-primary); /* Small delayed pop on the "0" so the eye lands there first */ display: inline-block; animation: _popIn_1nmt7_1 0.5s ease-out 0.3s both; } @keyframes _popIn_1nmt7_1 { 0% { opacity: 0; transform: scale(0.5); } 70% { opacity: 1; transform: scale(1.15); } 100% { opacity: 1; transform: scale(1); } } ._title_1nmt7_165 { margin: 14px 0 10px; color: var(--text-primary-dark); font-size: 25px; font-weight: var(--font-weight-bold); line-height: 1.2; } ._description_1nmt7_185 { margin: 0; color: var(--text-secondary); font-size: 14px; font-weight: var(--font-weight-semibold); line-height: 1.55; } /* ====================================================== ILLUSTRATION ====================================================== */ ._illustration_1nmt7_213 { position: relative; width: 100%; max-width: 520px; height: 225px; margin-top: 14px; overflow: hidden; } /* ====================================================== MOUNTAINS ====================================================== */ ._mountainBack_1nmt7_245 { position: absolute; left: 50%; bottom: 46px; width: 300px; height: 100px; transform: translateX(-50%); background: var(--color-gray-light); clip-path: polygon( 0 100%, 18% 61%, 31% 76%, 48% 32%, 65% 70%, 77% 52%, 100% 100% ); opacity: 0.7; } ._mountainFront_1nmt7_297 { position: absolute; left: 50%; bottom: 45px; width: 430px; height: 82px; transform: translateX(-50%); background: var(--surface-muted); clip-path: polygon( 0 100%, 17% 55%, 31% 76%, 46% 51%, 58% 72%, 71% 47%, 100% 100% ); opacity: 0.7; } /* ====================================================== CLOUDS ====================================================== */ ._cloud_1nmt7_357 { position: absolute; width: 64px; height: 16px; background: var(--color-gray-light); border-radius: var(--radius-full); opacity: 0.9; /* Clouds drift left<->right forever, each on its own loop. will-change hints the browser this layer moves, for smoother motion. */ animation: _drift_1nmt7_1 6s ease-in-out infinite; will-change: transform; } ._cloud_1nmt7_357 span { position: absolute; bottom: 3px; display: block; background: var(--color-gray-light); border-radius: var(--radius-full); } ._cloud_1nmt7_357 span:nth-child(1) { left: 9px; width: 22px; height: 22px; } ._cloud_1nmt7_357 span:nth-child(2) { left: 25px; width: 30px; height: 30px; } ._cloud_1nmt7_357 span:nth-child(3) { right: 4px; width: 20px; height: 20px; } @keyframes _drift_1nmt7_1 { 0%, 100% { transform: translateX(0); } 50% { transform: translateX(10px); } } ._cloudLeft_1nmt7_479 { top: 42px; left: 35px; animation-duration: 7s; } ._cloudRight_1nmt7_493 { top: 42px; right: 60px; transform: scale(0.9); /* Slightly different duration + direction so clouds don't move in sync */ animation-duration: 5.5s; animation-direction: reverse; } ._cloudSmall_1nmt7_515 { top: 80px; right: 10px; transform: scale(0.65); animation-duration: 8s; } /* ====================================================== GROUND ====================================================== */ ._groundLine_1nmt7_541 { position: absolute; left: 50%; bottom: 44px; width: 480px; height: 1px; transform: translateX(-50%); background: var(--border-light); } /* ====================================================== ROAD ====================================================== */ ._road_1nmt7_577 { position: absolute; right: 130px; bottom: 4px; width: 105px; height: 58px; transform: skewX(-35deg); border-left: 2px dashed var(--border-default); } ._road_1nmt7_577 span { display: none; } /* ====================================================== ROCKS ====================================================== */ ._rock_1nmt7_621 { position: absolute; bottom: 29px; width: 38px; height: 19px; background: var(--line-strong); border-radius: 50% 50% 12px 12px; opacity: 0.9; } ._rockLeft_1nmt7_651 { left: 50px; } ._rockRight_1nmt7_659 { right: 50px; } /* ====================================================== PLANTS ====================================================== */ ._plant_1nmt7_675 { position: absolute; bottom: 33px; width: 40px; height: 54px; /* Plants sway gently like a light breeze — rotates around the base */ transform-origin: bottom center; animation: _sway_1nmt7_1 4s ease-in-out infinite; } @keyframes _sway_1nmt7_1 { 0%, 100% { transform: rotate(-3deg); } 50% { transform: rotate(3deg); } } ._plantLeft_1nmt7_721 { left: 115px; animation-duration: 3.5s; } ._plantRight_1nmt7_733 { right: 95px; /* Keep the existing scale, just add the sway on top of it via a separate wrapper transform isn't available here, so we bake the scale into the sway keyframe timing instead by delaying it slightly */ animation-duration: 4.5s; animation-delay: 0.4s; } ._plantRight_1nmt7_733 ._plantStem_1nmt7_751, ._plantRight_1nmt7_733 ._leafOne_1nmt7_753, ._plantRight_1nmt7_733 ._leafTwo_1nmt7_755, ._plantRight_1nmt7_733 ._leafThree_1nmt7_757 { transform-origin: inherit; } ._plantStem_1nmt7_751 { position: absolute; left: 50%; bottom: 0; width: 2px; height: 43px; background: var(--ink-muted); transform: translateX(-50%); } ._leafOne_1nmt7_753, ._leafTwo_1nmt7_755, ._leafThree_1nmt7_757 { position: absolute; width: 17px; height: 7px; border: 2px solid var(--ink-muted); border-radius: 50%; } ._leafOne_1nmt7_753 { left: 3px; top: 16px; transform: rotate(35deg); } ._leafTwo_1nmt7_755 { right: 2px; top: 23px; transform: rotate(-35deg); } ._leafThree_1nmt7_757 { left: 6px; top: 32px; transform: rotate(25deg); } /* ====================================================== SIGN BOARD ====================================================== */ ._signWrapper_1nmt7_867 { position: absolute; left: 50%; bottom: 35px; width: 125px; height: 170px; transform: translateX(-50%); /* Sign drops in and settles after the page content has faded in */ animation: _dropIn_1nmt7_1 0.7s cubic-bezier(0.34, 1.56, 0.64, 1) 0.5s both; } @keyframes _dropIn_1nmt7_1 { 0% { opacity: 0; transform: translate(-50%, -30px); } 100% { opacity: 1; transform: translate(-50%, 0); } } ._signTopCircle_1nmt7_919 { position: absolute; top: 0; left: 50%; width: 15px; height: 15px; transform: translateX(-50%); background: var(--ink-muted); border-radius: var(--radius-full); z-index: 3; } ._signBoard_1nmt7_955 { position: absolute; top: 21px; left: 50%; width: 105px; height: 41px; transform: translateX(-50%); display: flex; align-items: center; justify-content: center; color: var(--color-white); font-size: 16px; font-weight: var(--font-weight-bold); background: var(--color-primary); border-radius: var(--radius-md) 0 0 var(--radius-md); z-index: 2; } ._signArrow_1nmt7_1009 { position: absolute; top: 0; right: -20px; width: 21px; height: 41px; background: var(--color-primary); clip-path: polygon(0 0, 100% 50%, 0 100%); } ._signPole_1nmt7_1037 { position: absolute; top: 10px; left: 50%; width: 6px; height: 145px; transform: translateX(-50%); background: var(--ink-muted); } ._signBase_1nmt7_1065 { position: absolute; bottom: 5px; left: 50%; width: 38px; height: 6px; transform: translateX(-50%); background: var(--ink-muted); border-radius: var(--radius-full); } /* ====================================================== ACTION BUTTONS ====================================================== */ ._actions_1nmt7_1105 { width: 100%; display: flex; align-items: center; justify-content: center; gap: 14px; margin-top: 4px; } ._actionButton_1nmt7_1129 { min-width: 185px; height: 43px; padding: 0 18px; display: inline-flex; align-items: center; justify-content: center; gap: var(--space-2); font-family: inherit; font-size: 13px; font-weight: var(--font-weight-semibold); border-radius: var(--radius-md); cursor: pointer; transition: all var(--transition-fast); } ._actionButton_1nmt7_1129:active { transform: scale(0.96); } ._primaryButton_1nmt7_1183 { color: var(--color-white); background: var(--color-primary); border: 1px solid var(--color-primary); } ._primaryButton_1nmt7_1183:hover { color: var(--color-white); background: var(--color-primary-light); border-color: var(--color-primary-light); box-shadow: var(--shadow-md); } ._secondaryButton_1nmt7_1219 { color: var(--text-primary-dark); background: var(--color-white); border: 1px solid var(--border-default); } ._secondaryButton_1nmt7_1219:hover { color: var(--color-primary); background: var(--color-bg-light); border-color: var(--color-primary); } /* ====================================================== HELP SECTION ====================================================== */ ._helpSection_1nmt7_1259 { width: 100%; max-width: 450px; margin-top: 18px; padding-top: 16px; border-top: 1px solid var(--border-light); } ._helpSection_1nmt7_1259 h3 { margin: 0 0 6px; color: var(--text-primary-dark); font-size: 16px; font-weight: var(--font-weight-bold); line-height: 1.3; } ._helpSection_1nmt7_1259 p { margin: 0; color: var(--text-secondary); font-size: 12px; font-weight: var(--font-weight-semibold); line-height: 1.55; } ._supportButton_1nmt7_1319 { min-height: 36px; margin-top: 12px; padding: 0 14px; display: inline-flex; align-items: center; justify-content: center; gap: var(--space-2); color: var(--text-primary-dark); font-family: inherit; font-size: 12px; font-weight: var(--font-weight-medium); background: var(--color-white); border: 1px solid var(--border-default); border-radius: var(--radius-md); cursor: pointer; transition: all var(--transition-fast); } ._supportButton_1nmt7_1319:hover { color: var(--color-primary); background: var(--color-bg-light); border-color: var(--color-primary); } /* ====================================================== RESPONSIVE ====================================================== */ @media (max-width: 768px) { ._page_1nmt7_9 { width: 100%; min-height: 100dvh; display: flex; align-items: flex-start; justify-content: center; padding: 35px 20px; overflow-x: hidden; overflow-y: auto; background: var(--color-white); } ._content_1nmt7_35 { width: 100%; max-width: 560px; } ._errorCode_1nmt7_97 { margin: 0; font-size: 82px; line-height: 0.9; letter-spacing: -3px; } ._title_1nmt7_165 { margin: 14px 0 10px; font-size: 22px; } ._description_1nmt7_185 { font-size: 13px; line-height: 1.55; } ._illustration_1nmt7_213 { position: relative; width: 100%; max-width: 500px; height: 230px; margin: 15px auto 0; overflow: visible; transform: none; } ._actions_1nmt7_1105 { width: 100%; display: flex; flex-direction: column; gap: 12px; margin-top: 8px; } ._actionButton_1nmt7_1129 { width: 100%; max-width: 350px; min-width: 0; height: 44px; font-size: 13px; } ._helpSection_1nmt7_1259 { width: 100%; max-width: 410px; margin-top: 20px; padding-top: 17px; } ._desktopBreak_1nmt7_1567 { display: none; } } /* ====================================================== MOBILE ====================================================== */ @media (max-width: 480px) { ._page_1nmt7_9 { width: 100%; min-height: 100dvh; align-items: flex-start; padding: 38px 18px 30px; overflow-x: hidden; overflow-y: auto; } ._content_1nmt7_35 { width: 100%; max-width: 100%; } ._errorCode_1nmt7_97 { margin: 0; font-size: 72px; line-height: 0.9; letter-spacing: -2px; } ._title_1nmt7_165 { margin: 12px 0 8px; font-size: 20px; line-height: 1.2; } ._description_1nmt7_185 { width: 100%; margin: 0 auto; font-size: 12px; line-height: 1.55; } ._illustration_1nmt7_213 { position: relative; width: 100%; max-width: 100%; height: 220px; margin: 16px auto 5px; overflow: visible; transform: none; } ._signWrapper_1nmt7_867 { left: 50%; bottom: 31px; width: 115px; height: 165px; transform: translateX(-50%); } ._signTopCircle_1nmt7_919 { top: 0; width: 14px; height: 14px; } ._signBoard_1nmt7_955 { top: 20px; width: 100px; height: 40px; font-size: 20px; } ._signArrow_1nmt7_1009 { right: -19px; width: 20px; height: 40px; } ._signPole_1nmt7_1037 { top: 10px; width: 5px; height: 140px; } ._signBase_1nmt7_1065 { bottom: 4px; width: 37px; height: 6px; } ._mountainBack_1nmt7_245 { left: 50%; bottom: 43px; width: 68%; max-width: 270px; height: 85px; transform: translateX(-50%); } ._mountainFront_1nmt7_297 { left: 50%; bottom: 42px; width: 94%; max-width: 390px; height: 72px; transform: translateX(-50%); } ._groundLine_1nmt7_541 { left: 50%; bottom: 41px; width: 96%; transform: translateX(-50%); } ._cloud_1nmt7_357 { width: 54px; height: 14px; } ._cloud_1nmt7_357 span:nth-child(1) { width: 19px; height: 19px; } ._cloud_1nmt7_357 span:nth-child(2) { width: 25px; height: 25px; } ._cloud_1nmt7_357 span:nth-child(3) { width: 17px; height: 17px; } ._cloudLeft_1nmt7_479 { top: 40px; left: 4%; } ._cloudRight_1nmt7_493 { top: 40px; right: 5%; } ._cloudSmall_1nmt7_515 { top: 75px; right: 1%; transform: scale(0.65); } ._plant_1nmt7_675 { bottom: 29px; width: 34px; height: 48px; } ._plantLeft_1nmt7_721 { left: 19%; } ._plantRight_1nmt7_733 { right: 18%; transform: scale(1.05); } ._plantStem_1nmt7_751 { height: 38px; } ._leafOne_1nmt7_753, ._leafTwo_1nmt7_755, ._leafThree_1nmt7_757 { width: 15px; height: 7px; } ._rock_1nmt7_621 { bottom: 27px; width: 35px; height: 17px; } ._rockLeft_1nmt7_651 { left: 6%; } ._rockRight_1nmt7_659 { right: 6%; } ._road_1nmt7_577 { right: 25%; bottom: 1px; width: 90px; height: 53px; } ._actions_1nmt7_1105 { width: 100%; margin-top: 5px; gap: 12px; } ._actionButton_1nmt7_1129 { width: 100%; max-width: 350px; height: 43px; padding: 0 15px; font-size: 12px; } ._helpSection_1nmt7_1259 { width: 100%; max-width: 100%; margin-top: 18px; padding-top: 16px; } ._helpSection_1nmt7_1259 h3 { margin-bottom: 7px; font-size: 13px; } ._helpSection_1nmt7_1259 p { padding: 0 5px; font-size: 11px; line-height: 1.55; } ._supportButton_1nmt7_1319 { min-height: 35px; margin-top: 13px; padding: 0 14px; font-size: 11px; } } /* ====================================================== VERY SMALL MOBILE ====================================================== */ @media (max-width: 360px) { ._page_1nmt7_9 { padding: 30px 14px 25px; } ._errorCode_1nmt7_97 { font-size: 64px; } ._title_1nmt7_165 { font-size: 19px; } ._illustration_1nmt7_213 { height: 205px; } ._mountainFront_1nmt7_297 { width: 96%; } ._plantLeft_1nmt7_721 { left: 17%; } ._plantRight_1nmt7_733 { right: 16%; } ._actionButton_1nmt7_1129 { height: 41px; } } @media (prefers-reduced-motion: reduce) { ._content_1nmt7_35, ._color_1nmt7_119, ._cloud_1nmt7_357, ._plant_1nmt7_675, ._signWrapper_1nmt7_867 { animation: none; } } /* ═══════════════════════════════════════════════════════════════════════════ MEDICORE HOSPITAL MANAGEMENT - Dark Sidebar, Light Content, Green Highlights FIXED VERSION - Correct widths, collapse support ═══════════════════════════════════════════════════════════════════════════ */ :root { /* ───────────────────────────────────────────────────────────────── PRIMARY COLORS ───────────────────────────────────────────────────────────────── */ /* Dark Navy Blue (Sidebar) */ --color-sidebar-dark: #101b3d; --color-sidebar-bg: #17254a; --color-sidebar-hover: #22335f; --color-sidebar-active: #0866ff; /* Teal/Green (Highlights & Buttons) */ --color-primary: #0866ff; --color-primary-light: #3385ff; --color-primary-dark: #0055e8; --color-primary-hover: #0055e8; /* Light Background (Main Content) */ --color-bg-light: #f8faff; --color-white: #ffffff; --color-gray-light: #f7f9fc; /* Text Colors */ --text-primary-dark: #101b3d; --text-secondary: #68738d; --text-muted: #9099ad; --text-light-on-dark: #e3e8f0; /* Status Colors */ --color-success: #10b981; --color-warning: #f59e0b; --color-danger: #ff3139; --color-info: #0866ff; /* Side Bar */ /* ── SIDEBAR (deep navy) ───────────────────────────────────────── */ --sb-bg: #101b3d; --sb-bg-deep: #0b1430; --sb-hover: rgba(255, 255, 255, 0.06); --sb-border: rgba(255, 255, 255, 0.07); --sb-text: #98a4bd; --sb-text-strong: #ffffff; --sb-label: #68738d; /* ── BRAND GREEN / TEAL ────────────────────────────────────────── */ --brand: #0866ff; --brand-hover: #0055e8; --brand-bright: #3385ff; --brand-logo: #0866ff; --brand-soft: #eef4ff; --brand-ink: #0055e8; /* ── LIGHT CONTENT AREA ────────────────────────────────────────── */ --bg: #f8faff; --surface: #ffffff; --surface-muted: #f7f9fc; /* ── TEXT (on light) ───────────────────────────────────────────── */ --ink: #101b3d; --ink-soft: #68738d; --ink-muted: #9099ad; /* ── BORDERS ───────────────────────────────────────────────────── */ --line: #e3e8f0; --line-strong: #d9e0ea; /* ── STATUS ────────────────────────────────────────────────────── */ --ok: #10b981; --warn: #f59e0b; --bad: #ff3139; --info: #0866ff; /* ── SHADOW ────────────────────────────────────────────────────── */ --sh-sm: 0 1px 2px rgba(15, 23, 42, 0.05); --sh-md: 0 4px 12px rgba(15, 23, 42, 0.08); --sh-lg: 0 12px 28px rgba(15, 23, 42, 0.12); /* ── TYPE ──────────────────────────────────────────────────────── */ --font: "Inter", -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif; /* ── SPACING ───────────────────────────────────────────────────── */ --s1: 4px; --s2: 8px; --s3: 12px; --s4: 16px; --s5: 20px; --s6: 24px; /* ── RADIUS ────────────────────────────────────────────────────── */ --r-sm: 6px; --r-md: 8px; --r-lg: 12px; --r-full: 999px; /* ── MOTION ────────────────────────────────────────────────────── */ --t-fast: 140ms ease; --t-base: 220ms cubic-bezier(0.4, 0, 0.2, 1); /* ── SIZES (matched to reference) ──────────────────────────────── */ --sidebar-w: 228px; /* reference is compact — was 280px */ --sidebar-w-collapsed: 68px; --header-h: 56px; /* shorter header as requested */ /* ── LAYERS ────────────────────────────────────────────────────── */ --z-sidebar: 300; --z-header: 200; --z-overlay: 250; --z-dropdown: 400; /* ───────────────────────────────────────────────────────────────── BORDERS & DIVIDERS ───────────────────────────────────────────────────────────────── */ --border-light: #e3e8f0; --border-default: #d9e0ea; --border-medium: #cbd3df; /* ───────────────────────────────────────────────────────────────── SHADOWS ───────────────────────────────────────────────────────────────── */ --shadow-sm: 0 1px 2px 0 rgba(15, 23, 42, 0.05); --shadow-md: 0 4px 6px -1px rgba(15, 23, 42, 0.1); --shadow-lg: 0 10px 15px -3px rgba(15, 23, 42, 0.1); --shadow-xl: 0 20px 25px -5px rgba(15, 23, 42, 0.15); /* ───────────────────────────────────────────────────────────────── TYPOGRAPHY ───────────────────────────────────────────────────────────────── */ --font-family-base: -apple-system, BlinkMacSystemFont, "Segoe UI", "Roboto", "Oxygen", "Ubuntu", "Cantarell", sans-serif; --font-size-xs: 12px; --font-size-sm: 13px; --font-size-base: 14px; --font-size-md: 15px; --font-size-lg: 16px; --font-size-xl: 18px; --font-size-2xl: 20px; --font-weight-normal: 400; --font-weight-medium: 500; --font-weight-semibold: 600; --font-weight-bold: 700; /* ───────────────────────────────────────────────────────────────── SPACING ───────────────────────────────────────────────────────────────── */ --space-1: 4px; --space-2: 8px; --space-3: 12px; --space-4: 16px; --space-5: 20px; --space-6: 24px; --space-8: 32px; --space-9: 36px; --space-10: 40px; /* ───────────────────────────────────────────────────────────────── BORDER RADIUS ───────────────────────────────────────────────────────────────── */ --radius-sm: 4px; --radius-md: 8px; --radius-lg: 12px; --radius-xl: 16px; --radius-full: 9999px; /* ───────────────────────────────────────────────────────────────── TRANSITIONS ───────────────────────────────────────────────────────────────── */ --transition-fast: 150ms ease-in-out; --transition-base: 200ms ease-in-out; --transition-slow: 250ms cubic-bezier(0.4, 0, 0.2, 1); /* ───────────────────────────────────────────────────────────────── COMPONENT SIZES ← FIXED (was too wide before) ───────────────────────────────────────────────────────────────── */ --sidebar-width: 235px; /* was 280px - now matches reference */ --sidebar-collapsed: 106px; /* icon-only collapsed width */ --header-height: 64px; /* ───────────────────────────────────────────────────────────────── Z-INDEX ───────────────────────────────────────────────────────────────── */ --z-dropdown: 1000; --z-sticky: 100; --z-fixed: 200; --z-modal-backdrop: 300; --z-modal: 400; --z-tooltip: 600; } * { box-sizing: border-box; } html { font-size: 14px; -webkit-font-smoothing: antialiased; -moz-osx-font-smoothing: grayscale; } body { margin: 0; font-family: var(--font); font-size: 14px; background: var(--bg); color: var(--ink); } /* ═══════════════════════════════════════════════════════════════════════════ MEDICORE GLOBAL STYLES - Hospital Management UI ═══════════════════════════════════════════════════════════════════════════ */ /* ───────────────────────────────────────────────────────────────── RESET & BASE ───────────────────────────────────────────────────────────────── */ html { font-size: 14px; -webkit-font-smoothing: antialiased; -moz-osx-font-smoothing: grayscale; } body { margin: 0; padding: 0; font-family: var(--font-family-base); font-size: var(--font-size-base); background-color: var(--color-bg-light); color: var(--text-primary-dark); } * { box-sizing: border-box; } /* ───────────────────────────────────────────────────────────────── SCROLLBAR ───────────────────────────────────────────────────────────────── */ * { scrollbar-width: thin; scrollbar-color: var(--color-primary) transparent; } ::-webkit-scrollbar { width: 8px; height: 8px; } ::-webkit-scrollbar-track { background: transparent; } ::-webkit-scrollbar-thumb { background: var(--color-primary); border-radius: var(--radius-full); } ::-webkit-scrollbar-thumb:hover { background: var(--color-primary-dark); } /* ───────────────────────────────────────────────────────────────── TYPOGRAPHY ───────────────────────────────────────────────────────────────── */ h1, h2, h3, h4, h5, h6 { margin: 0; font-weight: var(--font-weight-bold); color: var(--text-primary-dark); } h1 { font-size: var(--font-size-2xl); margin-bottom: var(--space-4); } h2 { font-size: var(--font-size-xl); margin-bottom: var(--space-3); } h3 { font-size: var(--font-size-lg); margin-bottom: var(--space-3); } h4 { font-size: var(--font-size-base); margin-bottom: var(--space-2); } p { margin: 0 0 var(--space-3) 0; color: var(--text-secondary); } a { color: var(--color-primary); text-decoration: none; transition: color var(--transition-fast); } a:hover { color: var(--color-primary-dark); } /* ───────────────────────────────────────────────────────────────── BUTTONS ───────────────────────────────────────────────────────────────── */ .app-btn { display: inline-flex; align-items: center; justify-content: center; gap: var(--space-2); padding: var(--space-2) var(--space-4); font-size: var(--font-size-sm); font-weight: var(--font-weight-medium); border: none; border-radius: var(--radius-md); cursor: pointer; transition: all var(--transition-fast); white-space: nowrap; } .app-btn:disabled { opacity: 0.6; cursor: not-allowed; } /* PRIMARY */ .app-btn-primary { background-color: var(--color-primary); color: var(--color-white); } .app-btn-primary:hover:not(:disabled) { background-color: var(--color-primary-light); box-shadow: 0 4px 12px color-mix(in srgb, var(--color-primary) 30%, transparent); } .app-btn-primary:active:not(:disabled) { background-color: var(--color-primary-dark); } /* SECONDARY */ .app-btn-secondary { background-color: var(--color-white); color: var(--text-primary-dark); border: 1px solid var(--border-default); } .app-btn-secondary:hover:not(:disabled) { border-color: var(--color-primary); color: var(--color-primary); background-color: var(--color-bg-light); } /* DANGER */ .app-btn-danger { background-color: var(--color-danger); color: var(--color-white); } .app-btn-danger:hover:not(:disabled) { background-color: #dc2626; box-shadow: 0 4px 12px rgba(239, 68, 68, 0.3); } /* ───────────────────────────────────────────────────────────────── FORM ELEMENTS ───────────────────────────────────────────────────────────────── */ .app-input, .app-select, .app-textarea { width: 100%; padding: var(--space-2) var(--space-3); font-size: var(--font-size-sm); border: 1px solid var(--border-default); border-radius: var(--radius-md); background-color: var(--color-white); color: var(--text-primary-dark); transition: all var(--transition-fast); } .app-input::placeholder { color: var(--text-muted); } .app-input:focus, .app-select:focus, .app-textarea:focus { outline: none; border-color: var(--color-primary); box-shadow: 0 0 0 3px color-mix(in srgb, var(--color-primary) 10%, transparent); } .app-label { display: block; margin-bottom: var(--space-2); font-size: var(--font-size-sm); font-weight: var(--font-weight-medium); color: var(--text-primary-dark); } /* ───────────────────────────────────────────────────────────────── CARDS ───────────────────────────────────────────────────────────────── */ .app-card { background-color: var(--color-white); border: 1px solid var(--border-light); border-radius: var(--radius-lg); box-shadow: var(--shadow-sm); transition: all var(--transition-fast); overflow: hidden; } .app-card:hover { box-shadow: var(--shadow-md); border-color: var(--border-default); } .app-card-header { padding: var(--space-4); border-bottom: 1px solid var(--border-light); background-color: var(--color-gray-light); } .app-card-body { padding: var(--space-4); } .app-card-footer { padding: var(--space-4); border-top: 1px solid var(--border-light); background-color: var(--color-gray-light); display: flex; gap: var(--space-2); justify-content: flex-end; } /* ───────────────────────────────────────────────────────────────── BADGES ───────────────────────────────────────────────────────────────── */ .app-badge { display: inline-flex; align-items: center; padding: 0 var(--space-2); font-size: var(--font-size-xs); font-weight: var(--font-weight-semibold); border-radius: var(--radius-md); white-space: nowrap; } .app-badge-success { background-color: #d1fae5; color: #065f46; } .app-badge-warning { background-color: #fef3c7; color: #92400e; } .app-badge-danger { background-color: #fee2e2; color: #7f1d1d; } .app-badge-info { background-color: #dbeafe; color: #0c4a6e; } .app-badge-primary { background-color: #d1f4f0; color: #0f4c40; } /* ───────────────────────────────────────────────────────────────── ALERTS ───────────────────────────────────────────────────────────────── */ .app-alert { padding: var(--space-3) var(--space-4); border-radius: var(--radius-md); border-left: 4px solid; margin-bottom: var(--space-4); } .app-alert-success { background-color: #d1fae5; border-left-color: #10b981; color: #065f46; } .app-alert-warning { background-color: #fef3c7; border-left-color: #f59e0b; color: #92400e; } .app-alert-danger { background-color: #fee2e2; border-left-color: #ef4444; color: #7f1d1d; } .app-alert-info { background-color: #dbeafe; border-left-color: #3b82f6; color: #0c4a6e; } /* ───────────────────────────────────────────────────────────────── UTILITIES ───────────────────────────────────────────────────────────────── */ .text-primary { color: var(--text-primary-dark); } .text-secondary { color: var(--text-secondary); } .text-muted { color: var(--text-muted); } .text-success { color: var(--color-success); } .text-warning { color: var(--color-warning); } .text-danger { color: var(--color-danger); } .bg-white { background-color: var(--color-white); } .bg-light { background-color: var(--color-bg-light); } .bg-primary { background-color: var(--color-primary); color: var(--color-white); } .rounded-md { border-radius: var(--radius-md); } .rounded-lg { border-radius: var(--radius-lg); } .shadow-md { box-shadow: var(--shadow-md); } .shadow-lg { box-shadow: var(--shadow-lg); } .flex { display: flex; } .flex-col { flex-direction: column; } .gap-2 { gap: var(--space-2); } .gap-3 { gap: var(--space-3); } .gap-4 { gap: var(--space-4); } .p-3 { padding: var(--space-3); } .p-4 { padding: var(--space-4); } .mb-3 { margin-bottom: var(--space-3); } .mb-4 { margin-bottom: var(--space-4); } .mt-3 { margin-top: var(--space-3); } .mt-4 { margin-top: var(--space-4); } .w-full { width: 100%; } .h-full { height: 100%; } .cursor-pointer { cursor: pointer; } .justify-between { justify-content: space-between; } .justify-end { justify-content: flex-end; } .items-center { align-items: center; } /* ═══════════════════════════════════════════════════════════════════════════ GLOBAL ERROR PAGE ═══════════════════════════════════════════════════════════════════════════ */ .global-error-page { min-height: 100vh; display: flex; align-items: center; justify-content: center; padding: 30px; background: #f8f9fa; } .global-error-content { width: 100%; max-width: 500px; text-align: center; background: #ffffff; padding: 40px; border-radius: 12px; box-shadow: 0 5px 25px rgba(0, 0, 0, 0.08); } .global-error-icon { width: 60px; height: 60px; margin: 0 auto 20px; display: flex; align-items: center; justify-content: center; border-radius: 50%; background: #fee2e2; color: #dc2626; font-size: 25px; } .global-error-content h1 { margin-bottom: 10px; font-size: 24px; } .global-error-content p { margin-bottom: 25px; color: #6b7280; } .global-error-content button { border: none; padding: 10px 22px; border-radius: 6px; cursor: pointer; background: #2563eb; color: #ffffff; font-size: 14px; } .global-error-content button:hover { opacity: 0.9; } /* ═══════════════════════════════════════════════════════════════════════════ ADMIN SIDEBAR / MAIN CONTENT LAYOUT FIX ═══════════════════════════════════════════════════════════════════════════ */ body { overflow-x: hidden; } /* ================================================================ MAIN LAYOUT AFTER SIDEBAR ================================================================ */ aside[class*="sidebar"] + div { width: calc( 100% - var(--current-sidebar-width, var(--sidebar-collapsed)) ) !important; max-width: calc( 100% - var(--current-sidebar-width, var(--sidebar-collapsed)) ) !important; min-width: 0 !important; margin-left: var( --current-sidebar-width, var(--sidebar-collapsed) ) !important; box-sizing: border-box !important; transition: margin-left var(--transition-slow), width var(--transition-slow), max-width var(--transition-slow) !important; } /* ================================================================ CONTENT WRAPPER ================================================================ */ aside[class*="sidebar"] + div > div { width: 100% !important; max-width: 100% !important; min-width: 0 !important; margin-left: 0 !important; margin-right: 0 !important; box-sizing: border-box !important; } /* ================================================================ OUTLET PAGE ================================================================ */ aside[class*="sidebar"] + div > div > * { width: 100%; max-width: 100%; min-width: 0; box-sizing: border-box; } /* ================================================================ TABLE ================================================================ */ aside[class*="sidebar"] + div table { max-width: 100%; } /* ================================================================ TABLET ================================================================ */ @media (max-width: 900px) { aside[class*="sidebar"] + div { width: 100% !important; max-width: 100% !important; margin-left: 0 !important; } } /* ================================================================ CONTENT PADDING ================================================================ */ aside[class*="sidebar"] + div > div { width: 100% !important; max-width: 100% !important; min-width: 0 !important; padding-left: 16px !important; padding-right: 16px !important; margin: 0 !important; box-sizing: border-box !important; } /* ═══════════════════════════════════════════════════════════════════════════ GLOBAL PAGE LAYOUT ═══════════════════════════════════════════════════════════════════════════ */ .page-layout { width: 100%; min-width: 0; display: flex; flex-direction: column; gap: var(--space-4); padding-top: var(--space-4); box-sizing: border-box; } .page-layout > .page-header, .page-layout > .ct-page-head, .page-layout > .ct-stats, .page-layout > .app-alert, .page-layout > .content-card { margin-bottom: 0; } /* ═══════════════════════════════════════════════════════════════════════════ MOBILE RESPONSIVE ═══════════════════════════════════════════════════════════════════════════ */ @media (max-width: 768px) { html, body { width: 100%; max-width: 100%; overflow-x: hidden; } /* ================================================================ ADMIN MAIN FULL WIDTH ================================================================ */ aside[class*="sidebar"] + div { width: 100% !important; max-width: 100% !important; min-width: 0 !important; margin-left: 0 !important; padding-top: 58px; overflow-x: hidden; } aside[class*="sidebar"] + div > div { width: 100% !important; max-width: 100% !important; min-width: 0 !important; padding-left: 12px !important; padding-right: 12px !important; margin: 0 !important; } /* ================================================================ PAGE LAYOUT ================================================================ */ .page-layout { width: 100%; max-width: 100%; min-width: 0; padding-top: var(--space-3); gap: var(--space-3); overflow-x: hidden; } /* ================================================================ PAGE HEADER ================================================================ */ .ct-page-head, .page-header { width: 100%; min-width: 0; display: flex; flex-direction: column; align-items: stretch; gap: var(--space-3); } .ct-page-head > div:first-child, .page-header-content { width: 100%; min-width: 0; } .ct-page-title, .page-title { width: 100%; max-width: 100%; margin-bottom: var(--space-1); overflow-wrap: break-word; } .ct-page-sub, .page-description { width: 100%; max-width: 100%; margin-bottom: 0; overflow-wrap: break-word; } /* ================================================================ PAGE ACTIONS ================================================================ */ .ct-page-actions, .page-header-actions { width: 100%; min-width: 0; display: grid; grid-template-columns: 1fr; gap: var(--space-2); } .ct-page-actions .app-btn, .page-header-actions .app-btn { width: 100%; min-width: 0; justify-content: center; } /* ================================================================ STATS ================================================================ */ .ct-stats { width: 100%; max-width: 100%; min-width: 0; display: grid !important; grid-template-columns: 1fr !important; gap: var(--space-3) !important; } .ct-stat-card { width: 100%; max-width: 100%; min-width: 0; } /* ================================================================ ALERTS ================================================================ */ .app-alert { width: 100%; max-width: 100%; min-width: 0; margin-bottom: 0; padding: var(--space-3) var(--space-3); overflow-wrap: break-word; } /* ================================================================ CONTENT CARD ================================================================ */ .content-card, .content-card-body { width: 100%; max-width: 100%; min-width: 0; } /* ================================================================ COMMON TABLE TOOLBAR ================================================================ */ .ct-toolbar { width: 100%; min-width: 0; display: flex; flex-direction: column; align-items: stretch; gap: var(--space-2); } .ct-toolbar-left, .ct-toolbar-right { width: 100%; min-width: 0; } .ct-toolbar-left { display: flex; flex-direction: column; gap: var(--space-2); } .ct-toolbar-right { display: flex; align-items: center; justify-content: flex-start; flex-wrap: wrap; gap: var(--space-2); } /* ================================================================ SEARCH ================================================================ */ .ct-search, .ct-search-box, .ct-search-wrapper { width: 100% !important; max-width: 100% !important; min-width: 0 !important; } .ct-search input, .ct-search-box input, .ct-search-wrapper input { width: 100% !important; min-width: 0 !important; max-width: 100% !important; } /* ================================================================ TABLE HORIZONTAL SCROLL ================================================================ */ .ct-scroll, .ct-table-wrapper, .table-responsive { width: 100%; max-width: 100%; overflow-x: auto; overflow-y: hidden; -webkit-overflow-scrolling: touch; } .ct-table { min-width: 720px; } /* ================================================================ PAGINATION ================================================================ */ .ct-pagination, .ct-pagination-footer { width: 100%; min-width: 0; display: flex; flex-wrap: wrap; align-items: center; gap: var(--space-2); } /* ================================================================ FORM BUTTONS ================================================================ */ .app-card-footer { flex-wrap: wrap; } /* ================================================================ ERROR PAGE ================================================================ */ .global-error-page { padding: var(--space-4); } .global-error-content { padding: var(--space-5); } } /* ═══════════════════════════════════════════════════════════════════════════ SMALL MOBILE ═══════════════════════════════════════════════════════════════════════════ */ @media (max-width: 480px) { aside[class*="sidebar"] + div > div { padding-left: 10px !important; padding-right: 10px !important; } .page-layout { gap: var(--space-3); } .ct-page-title, .page-title { font-size: var(--font-size-xl); } .ct-page-sub, .page-description { font-size: var(--font-size-xs); line-height: 1.5; } .app-btn { min-height: 38px; padding: var(--space-2) var(--space-3); } .ct-stat-card { padding: var(--space-3); } .app-alert { font-size: var(--font-size-xs); line-height: 1.5; } .ct-table { min-width: 680px; } } /* ═══════════════════════════════════════════════════════════════════════════ common-table.css Global, reusable table design system — plain classes, NOT a CSS module. Import once. Uses ONLY tokens already defined in hospital-theme.css / hospital-global.css — no parallel variable set. COMPACT DENSITY: padding, font-size, and control heights are tightened throughout so more rows fit in the first viewport. ═══════════════════════════════════════════════════════════════════════════ */ /* ── STAT CARDS ───────────────────────────────────────────────────────── */ .ct-stats { display: grid; grid-template-columns: repeat(auto-fit, minmax(200px, 1fr)); gap: var(--space-3); margin-bottom: var(--space-4); } .ct-stat-card { display: flex; align-items: flex-start; gap: var(--space-3); background: var(--color-white); border: 1px solid var(--border-light); border-radius: var(--radius-md); padding: var(--space-3) var(--space-4); box-shadow: var(--shadow-sm); } .ct-stat-icon { width: 34px; height: 34px; flex-shrink: 0; border-radius: var(--radius-sm); display: flex; align-items: center; justify-content: center; font-size: 16px; } .ct-stat-icon.teal { background: var(--color-bg-light); color: var(--color-primary); } .ct-stat-icon.blue { background: #eaf2ff; color: var(--color-info); } .ct-stat-icon.amber { background: #fff7e6; color: var(--color-warning); } .ct-stat-icon.red { background: #fef1f2; color: var(--color-danger); } .ct-stat-label { font-size: var(--font-size-xs); color: var(--text-secondary); margin-bottom: 2px; } .ct-stat-value { font-size: var(--font-size-xl); font-weight: var(--font-weight-bold); color: var(--text-primary-dark); line-height: 1.2; } .ct-stat-delta { font-size: 10.5px; margin-top: 2px; display: flex; align-items: center; gap: 3px; } .ct-stat-delta.up { color: var(--color-success); } .ct-stat-delta.down { color: var(--color-danger); } .ct-stat-delta-muted { color: var(--text-muted); } /* ── PAGE HEADER ──────────────────────────────────────────────────────── */ .ct-page-head { display: flex; align-items: flex-start; justify-content: space-between; gap: var(--space-3); margin-bottom: var(--space-4); flex-wrap: wrap; } .ct-page-title { font-size: var(--font-size-xl); font-weight: var(--font-weight-bold); color: var(--text-primary-dark); margin: 0 0 2px; } .ct-page-sub { font-size: var(--font-size-xs); color: var(--text-secondary); margin: 0; } .ct-page-actions { display: flex; align-items: center; gap: var(--space-2); flex-shrink: 0; } /* ── ROOT TABLE SECTION ───────────────────────────────────────────────── */ .ct-root { display: flex; flex-direction: column; width: 100%; background: var(--color-white); border: 1px solid var(--border-light); border-radius: var(--radius-md); overflow: hidden; } /* ── TOOLBAR ──────────────────────────────────────────────────────────── */ .ct-toolbar { display: flex; align-items: center; gap: var(--space-2); padding: var(--space-2) var(--space-3); border-bottom: 1px solid var(--border-light); background: var(--color-white); min-height: 46px; flex-wrap: wrap; } .ct-toolbar-left { flex: 1; display: flex; align-items: center; min-width: 220px; } .ct-search-btn { display: flex; align-items: center; gap: 6px; height: 30px; padding: 0 var(--space-2); background: var(--color-gray-light); border: 1px solid var(--border-light); border-radius: var(--radius-sm); color: var(--text-muted); font-size: var(--font-size-xs); cursor: pointer; width: 100%; max-width: 300px; transition: border-color var(--transition-fast), background var(--transition-fast); } .ct-search-btn:hover { border-color: var(--border-default); background: var(--color-bg-light); } .ct-search-placeholder { flex: 1; text-align: left; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; } .ct-search-box { display: flex; align-items: center; gap: 6px; height: 30px; padding: 0 var(--space-2); background: var(--color-white); border: 1.5px solid var(--color-primary); border-radius: var(--radius-sm); width: 100%; max-width: 300px; box-shadow: 0 0 0 3px rgba(0, 201, 167, 0.1); } .ct-search-icon { color: var(--text-muted); flex-shrink: 0; width: 13px; height: 13px; } .ct-search-input { flex: 1; border: none; outline: none; background: transparent; font-size: var(--font-size-xs); color: var(--text-primary-dark); font-family: inherit; } .ct-search-input::placeholder { color: var(--text-muted); } .ct-search-clear { display: flex; align-items: center; justify-content: center; width: 16px; height: 16px; border-radius: 50%; border: none; background: var(--border-light); color: var(--text-secondary); cursor: pointer; flex-shrink: 0; } .ct-search-clear:hover { background: var(--border-default); } .ct-toolbar-right { display: flex; align-items: center; gap: 5px; flex-shrink: 0; flex-wrap: wrap; } .ct-divider { width: 1px; height: 18px; background: var(--border-light); margin: 0 3px; } .ct-tbtn { display: flex; align-items: center; gap: 5px; height: 28px; padding: 0 var(--space-2); background: var(--color-white); border: 1px solid var(--border-light); border-radius: var(--radius-sm); color: var(--text-secondary); font-size: 11px; font-weight: var(--font-weight-medium); cursor: pointer; transition: background var(--transition-fast), border-color var(--transition-fast), color var(--transition-fast); white-space: nowrap; } .ct-tbtn:hover { background: var(--color-bg-light); border-color: var(--border-default); } .ct-tbtn.is-active { background: var(--color-bg-light); border-color: var(--color-primary); color: var(--color-primary-dark); } .ct-filter-btn { position: relative; } .ct-badge-count { display: inline-flex; align-items: center; justify-content: center; min-width: 16px; height: 16px; padding: 0 4px; border-radius: var(--radius-full); background: var(--color-primary); color: var(--color-white); font-size: 9.5px; font-weight: var(--font-weight-bold); } /* ── VIEW TOGGLE ──────────────────────────────────────────────────────── */ .ct-view-toggle { display: flex; align-items: center; background: var(--color-gray-light); border: 1px solid var(--border-light); border-radius: var(--radius-sm); padding: 2px; gap: 2px; } .ct-view-btn { display: flex; align-items: center; gap: 4px; height: 22px; padding: 0 8px; border: none; border-radius: 3px; background: transparent; color: var(--text-muted); font-size: 10.5px; cursor: pointer; transition: background var(--transition-fast), color var(--transition-fast); } .ct-view-btn.is-active { background: var(--color-white); color: var(--text-primary-dark); font-weight: var(--font-weight-semibold); box-shadow: var(--shadow-sm); } /* ── COLUMN VISIBILITY MENU ───────────────────────────────────────────── */ .ct-colvis { position: relative; } .ct-menu { position: absolute; top: calc(100% + 5px); right: 0; z-index: 200; background: var(--color-white); border: 1px solid var(--border-light); border-radius: var(--radius-sm); box-shadow: var(--shadow-lg); min-width: 170px; padding: 4px 0; animation: ct-fade-in 0.12s ease; } .ct-menu-header { font-size: 9px; font-weight: var(--font-weight-bold); letter-spacing: 0.06em; text-transform: uppercase; color: var(--text-muted); padding: 5px var(--space-2) 6px; border-bottom: 1px solid var(--border-light); margin-bottom: 2px; } .ct-menu-item { display: flex; align-items: center; gap: 6px; padding: 5px var(--space-2); font-size: var(--font-size-xs); color: var(--text-primary-dark); cursor: pointer; transition: background var(--transition-fast); } .ct-menu-item:hover { background: var(--color-bg-light); } .ct-menu-item input:disabled + span { opacity: 0.4; } /* ── SELECTION CHECKBOXES ─────────────────────────────────────────────── */ .ct-checkbox { width: 13px; height: 13px; accent-color: var(--color-primary); cursor: pointer; } .ct-th-check, .ct-td-check { width: 34px !important; text-align: center !important; padding: 6px 4px !important; } /* ── INLINE FILTER ROW (not a modal) ─────────────────────────────────── */ .ct-filter-row { display: flex; align-items: flex-end; gap: var(--space-2); padding: var(--space-2) var(--space-3); border-bottom: 1px solid var(--border-light); background: var(--color-bg-light); flex-wrap: wrap; } .ct-filter-field { display: flex; flex-direction: column; gap: 3px; min-width: 120px; } .ct-filter-label { font-size: 10.5px; font-weight: var(--font-weight-medium); color: var(--text-secondary); } .ct-filter-select, .ct-filter-input { height: 28px; padding: 0 8px; border: 1px solid var(--border-light); border-radius: var(--radius-sm); background: var(--color-white); font-size: var(--font-size-xs); color: var(--text-primary-dark); outline: none; font-family: inherit; transition: border-color var(--transition-fast); } .ct-filter-select:focus, .ct-filter-input:focus { border-color: var(--color-primary); } .ct-filter-clear { height: 28px; padding: 0 8px; border: none; background: none; color: var(--color-primary-dark); font-size: var(--font-size-xs); font-weight: var(--font-weight-semibold); cursor: pointer; } .ct-filter-clear:hover { text-decoration: underline; } /* ── TABLE SCROLL / TABLE ─────────────────────────────────────────────── */ .ct-scroll { overflow-x: auto; overflow-y: auto; flex: 0 0 auto; } .ct-scroll::-webkit-scrollbar { width: 5px; height: 5px; } .ct-scroll::-webkit-scrollbar-track { background: transparent; } .ct-scroll::-webkit-scrollbar-thumb { background: var(--border-light); border-radius: var(--radius-sm); } .ct-scroll::-webkit-scrollbar-thumb:hover { background: var(--border-default); } .ct-table { width: 100%; table-layout: auto; border-collapse: collapse; border-spacing: 0; } .ct-thead { position: sticky; top: 0; z-index: 10; background: var(--color-gray-light); } .ct-thead tr { border-bottom: 1px solid var(--border-light); } .ct-thead th { padding: 7px var(--space-3); font-size: 11px; font-weight: var(--font-weight-semibold); color: var(--text-secondary); white-space: nowrap; text-overflow: ellipsis; overflow: hidden; user-select: none; background: var(--color-gray-light); } /* ── SORTABLE HEADERS ─────────────────────────────────────────────────── */ .ct-th-sortable { cursor: pointer; } .ct-th-sortable:hover { color: var(--text-primary-dark); } .ct-th-label { display: inline-flex; align-items: center; gap: 3px; } .ct-sort-icon { width: 11px; height: 11px; flex-shrink: 0; opacity: 0.35; transition: opacity var(--transition-fast), transform var(--transition-fast); } .ct-sort-icon.is-asc { opacity: 1; color: var(--color-primary); } .ct-sort-icon.is-desc { opacity: 1; color: var(--color-primary); transform: rotate(180deg); } .ct-th-actions, .ct-td-actions { width: 58px !important; text-align: center !important; padding: 5px 6px !important; } /* ── TBODY / ROWS ─────────────────────────────────────────────────────── */ .ct-tbody tr.ct-row { transition: background var(--transition-fast); cursor: pointer; } .ct-tbody tr.ct-row:last-child td { border-bottom: none; } .ct-tbody tr.ct-row:hover { background: var(--color-bg-light); } .ct-row-highlight { background: var(--color-bg-light) !important; } .ct-row-selected { background: var(--color-bg-light) !important; } .ct-row-selected:hover { background: var(--color-gray-light) !important; } .ct-tbody td { padding: 7px var(--space-3); font-size: var(--font-size-xs); color: var(--text-primary-dark); vertical-align: middle; border-bottom: 1px solid var(--border-light); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; max-width: 260px; } /* ── AVATAR + NAME CELL ───────────────────────────────────────────────── */ .ct-person { display: flex; align-items: center; gap: 8px; min-width: 0; } .ct-avatar { width: 27px; height: 27px; border-radius: 50%; flex-shrink: 0; display: flex; align-items: center; justify-content: center; font-size: 10.5px; font-weight: var(--font-weight-bold); color: var(--color-white); background: linear-gradient( 135deg, var(--color-primary) 0%, var(--color-primary-light) 100% ); overflow: hidden; } .ct-avatar img { width: 100%; height: 100%; object-fit: cover; } .ct-person-meta { min-width: 0; } .ct-person-name { font-size: var(--font-size-xs); font-weight: var(--font-weight-semibold); color: var(--text-primary-dark); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; } .ct-person-sub { font-size: 10.5px; color: var(--text-muted); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; } .ct-two-line-main { font-size: var(--font-size-xs); color: var(--text-primary-dark); } .ct-two-line-sub { font-size: 10.5px; color: var(--text-muted); margin-top: 1px; } /* ── STATUS BADGES ────────────────────────────────────────────────────── */ .ct-badge { display: inline-flex; align-items: center; padding: 2px 8px; border-radius: var(--radius-full); font-size: 10.5px; font-weight: var(--font-weight-semibold); white-space: nowrap; } .ct-badge-brand { background: var(--color-bg-light); color: var(--color-primary-dark); } .ct-badge-success { background: #dcfce7; color: #15803d; } .ct-badge-warning { background: #fef3c7; color: #92400e; } .ct-badge-info { background: #dbeafe; color: #1d4ed8; } .ct-badge-danger { background: #fee2e2; color: #b91c1c; } .ct-badge-neutral { background: var(--color-gray-light); color: var(--text-secondary); } /* ── ROW ACTIONS ──────────────────────────────────────────────────────── */ .ct-action-trigger { display: inline-flex; align-items: center; justify-content: center; width: 26px; height: 26px; border-radius: var(--radius-sm); border: none; background: transparent; color: var(--text-muted); cursor: pointer; transition: background var(--transition-fast), color var(--transition-fast); } .ct-action-trigger:hover { background: var(--color-bg-light); color: var(--text-primary-dark); } .ct-view-link { display: inline-flex; align-items: center; height: 24px; padding: 0 9px; border: 1px solid var(--border-light); border-radius: var(--radius-sm); background: var(--color-white); color: var(--text-secondary); font-size: 10.5px; font-weight: var(--font-weight-semibold); cursor: pointer; margin-right: 5px; } .ct-view-link:hover { background: var(--color-bg-light); } .ct-action-menu { background: var(--color-white); border: 1px solid var(--border-light); border-radius: var(--radius-sm); box-shadow: var(--shadow-lg); min-width: 175px; padding: 4px 0; animation: ct-fade-in 0.12s ease; } .ct-action-item { display: flex; align-items: center; gap: 7px; width: 100%; padding: 6px var(--space-3); border: none; background: transparent; text-align: left; font-size: var(--font-size-xs); color: var(--text-primary-dark); cursor: pointer; transition: background var(--transition-fast); white-space: nowrap; } .ct-action-item:hover { background: var(--color-bg-light); } .ct-action-icon { display: flex; align-items: center; justify-content: center; width: 13px; height: 13px; color: var(--text-secondary); flex-shrink: 0; } .ct-danger { color: var(--color-danger) !important; } .ct-danger .ct-action-icon { color: var(--color-danger) !important; } .ct-danger:hover { background: #fef2f2 !important; } /* ── EMPTY STATE ──────────────────────────────────────────────────────── */ .ct-empty { display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 8px; padding: 40px var(--space-4); color: var(--text-muted); } .ct-empty-icon { opacity: 0.35; } .ct-empty p { font-size: var(--font-size-xs); color: var(--text-muted); margin: 0; } /* ── SKELETON LOADING ─────────────────────────────────────────────────── */ @keyframes ct-shimmer { 0% { background-position: -400px 0; } 100% { background-position: 400px 0; } } .ct-skeleton-row td { padding: 7px var(--space-3); border-bottom: 1px solid var(--border-light); } .ct-skeleton-cell { height: 9px; border-radius: 3px; background: linear-gradient( 90deg, var(--border-light) 25%, var(--color-gray-light) 50%, var(--border-light) 75% ); background-size: 800px 100%; animation: ct-shimmer 1.4s infinite linear; } .ct-skeleton-check { width: 13px; height: 13px; border-radius: 3px; margin: 0 auto; } /* ── GRID VIEW ────────────────────────────────────────────────────────── */ .ct-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(220px, 1fr)); gap: 10px; padding: var(--space-3); } .ct-grid-card { background: var(--color-white); border: 1px solid var(--border-light); border-radius: var(--radius-sm); padding: 10px; cursor: pointer; transition: box-shadow var(--transition-fast), transform var(--transition-fast); } .ct-grid-card:hover { box-shadow: var(--shadow-md); transform: translateY(-1px); } .ct-grid-skeleton { height: 100px; border-radius: var(--radius-sm); background: linear-gradient( 90deg, var(--border-light) 25%, var(--color-gray-light) 50%, var(--border-light) 75% ); background-size: 800px 100%; animation: ct-shimmer 1.4s infinite linear; } /* ── BULK ACTION BAR — shown only while rows are selected ─────────────── */ .ct-bulk-bar { display: flex; align-items: center; gap: 8px; padding: 6px var(--space-3); background: var(--color-bg-light); border-top: 1px solid var(--border-default); border-bottom: 1px solid var(--border-default); flex-shrink: 0; flex-wrap: wrap; animation: ct-slide-in 0.15s ease; } @keyframes ct-slide-in { from { opacity: 0; transform: translateY(-4px); } to { opacity: 1; transform: translateY(0); } } .ct-bulk-count { font-size: var(--font-size-xs); font-weight: var(--font-weight-bold); color: var(--color-primary-dark); margin-right: 2px; white-space: nowrap; } .ct-bulk-actions { display: flex; align-items: center; gap: 5px; flex-wrap: wrap; } .ct-bulk-btn { display: flex; align-items: center; gap: 4px; height: 26px; padding: 0 9px; border-radius: var(--radius-sm); border: 1px solid var(--border-light); background: var(--color-white); font-size: 10.5px; font-weight: var(--font-weight-medium); color: var(--text-secondary); cursor: pointer; transition: background var(--transition-fast), color var(--transition-fast); white-space: nowrap; } .ct-bulk-btn:hover { background: var(--color-bg-light); } .ct-bulk-danger { color: var(--color-danger) !important; border-color: #fecaca !important; } .ct-bulk-danger:hover { background: #fef2f2 !important; } .ct-bulk-deselect { margin-left: auto; display: flex; align-items: center; justify-content: center; width: 22px; height: 22px; border-radius: var(--radius-sm); border: none; background: transparent; color: var(--text-muted); cursor: pointer; flex-shrink: 0; } .ct-bulk-deselect:hover { background: var(--color-white); color: var(--text-secondary); } /* ── PAGINATION ───────────────────────────────────────────────────────── */ .ct-pagination { display: flex; align-items: center; justify-content: space-between; padding: 6px var(--space-3); border-top: 1px solid var(--border-light); background: var(--color-white); flex-shrink: 0; gap: var(--space-2); flex-wrap: wrap; } .ct-pg-showing { font-size: var(--font-size-xs); color: var(--text-secondary); } .ct-pg-showing strong { color: var(--text-primary-dark); font-weight: var(--font-weight-bold); } .ct-pg-controls { display: flex; align-items: center; gap: 8px; } .ct-rows-label { font-size: var(--font-size-xs); color: var(--text-secondary); white-space: nowrap; } .ct-rows-select { height: 26px; padding: 0 6px; border: 1px solid var(--border-light); border-radius: var(--radius-sm); background: var(--color-white); font-size: var(--font-size-xs); color: var(--text-primary-dark); cursor: pointer; outline: none; } .ct-rows-select:focus { border-color: var(--color-primary); } .ct-page-numbers { display: flex; align-items: center; gap: 2px; } .ct-page-num { min-width: 24px; height: 24px; padding: 0 5px; border-radius: var(--radius-sm); border: none; background: transparent; color: var(--text-secondary); font-size: var(--font-size-xs); font-weight: var(--font-weight-semibold); cursor: pointer; } .ct-page-num:hover { background: var(--color-bg-light); } .ct-page-num.is-active { background: var(--color-primary); color: var(--color-white); } .ct-page-ellipsis { color: var(--text-muted); font-size: var(--font-size-xs); padding: 0 1px; } .ct-page-btns { display: flex; align-items: center; gap: 2px; background: var(--color-gray-light); border: 1px solid var(--border-light); border-radius: var(--radius-sm); padding: 2px; } .ct-page-btn { display: inline-flex; align-items: center; justify-content: center; width: 24px; height: 20px; border-radius: 3px; border: none; background: transparent; color: var(--text-secondary); cursor: pointer; transition: background var(--transition-fast), color var(--transition-fast); } .ct-page-btn:hover:not(:disabled) { background: var(--color-white); color: var(--text-primary-dark); box-shadow: var(--shadow-sm); } .ct-page-btn:disabled { opacity: 0.35; cursor: not-allowed; } /* ── ANIMATIONS ───────────────────────────────────────────────────────── */ @keyframes ct-fade-in { from { opacity: 0; transform: translateY(-3px); } to { opacity: 1; transform: translateY(0); } } /* ── RESPONSIVE ───────────────────────────────────────────────────────── */ @media (max-width: 900px) { .ct-stats { grid-template-columns: repeat(2, 1fr); } } @media (max-width: 768px) { .ct-toolbar { flex-wrap: wrap; } .ct-toolbar-left { width: 100%; } .ct-search-btn, .ct-search-box { max-width: 100%; } .ct-pagination { flex-direction: column; align-items: flex-start; } .ct-pg-controls { width: 100%; justify-content: space-between; flex-wrap: wrap; } .ct-page-head { flex-direction: column; } .ct-page-actions { width: 100%; } } @media (max-width: 560px) { .ct-stats { grid-template-columns: 1fr; } .ct-rows-label { display: none; } } /* ═══════════════════════════════════════════════════════════════════════════ COMMON TABLE ICON ACTIONS ═══════════════════════════════════════════════════════════════════════════ */ .ct-th-actions, .ct-td-actions { width: 115px !important; min-width: 115px !important; text-align: center !important; padding: 5px 8px !important; } /* ACTION GROUP */ .ct-action-group { display: inline-flex; align-items: center; justify-content: center; gap: 6px; } /* COMMON ICON BUTTON */ .ct-icon-action { width: 27px; height: 27px; flex-shrink: 0; display: inline-flex; align-items: center; justify-content: center; padding: 0; margin: 0; border: 1px solid var(--border-light); border-radius: var(--radius-md); background: var(--color-white); color: var(--text-secondary); cursor: pointer; outline: none; transition: background var(--transition-fast), border-color var(--transition-fast), color var(--transition-fast), transform var(--transition-fast); } .ct-icon-action svg { width: 13px; height: 13px; stroke-width: 2; } .ct-icon-action:active { transform: scale(0.93); } /* ================================================================ VIEW ================================================================ */ .ct-icon-view { color: var(--color-primary); background: color-mix(in srgb, var(--color-primary) 8%, var(--color-white)); border-color: color-mix( in srgb, var(--color-primary) 22%, var(--border-light) ); } .ct-icon-view:hover { color: var(--color-primary); background: color-mix(in srgb, var(--color-primary) 16%, var(--color-white)); border-color: var(--color-primary); } /* ================================================================ EDIT ================================================================ */ .ct-icon-edit { color: var(--color-warning); background: color-mix(in srgb, var(--color-warning) 10%, var(--color-white)); border-color: color-mix( in srgb, var(--color-warning) 22%, var(--border-light) ); } .ct-icon-edit:hover { color: var(--color-warning); background: color-mix(in srgb, var(--color-warning) 18%, var(--color-white)); border-color: var(--color-warning); } /* ================================================================ DELETE ================================================================ */ .ct-icon-delete { color: var(--color-danger); background: color-mix(in srgb, var(--color-danger) 10%, var(--color-white)); border-color: color-mix( in srgb, var(--color-danger) 22%, var(--border-light) ); } .ct-icon-delete:hover { color: var(--color-danger); background: color-mix(in srgb, var(--color-danger) 18%, var(--color-white)); border-color: var(--color-danger); } /* ================================================================ DISABLED ================================================================ */ .ct-icon-action:disabled { opacity: 0.5; cursor: not-allowed; transform: none; } /* ================================================================ RESPONSIVE ================================================================ */ @media (max-width: 560px) { .ct-th-actions, .ct-td-actions { width: 105px !important; min-width: 105px !important; } .ct-action-group { gap: 5px; } .ct-icon-action { width: 26px; height: 26px; } .ct-icon-action svg { width: 12px; height: 12px; } } /*$vite$:1*/